html - 異なる色で水平方向のナビゲーションを作成する

Question

オプションごとに異なる背景色を持ち、水平なシンプルなナビゲーション メニューを作成しようとしています。これまでのところ、ナビゲーションは図のようになっています。

 <ul id="session-nav">
    <li class="session1"><a href="#" class="active">Session 1</a></li>
    <li class="session2"><a href="#">Session 2</a></li>
    <li class="session3"><a href="#">Session 3</a></li>
</ul>

しかし、CSSでこれを行う方法について混乱しています。

このメニューを画像のようにしたいと思います。

どうもありがとう、ジョニー。

Answer 1

コードで次のことを行う必要があります。

CSS:

#session-nav { list-style: none; }
#session-nav li { display: inline-block; padding: 5px 10px; }
#session-nav li.session1 { background: green;  }

編集: ここに jsfiddle がありますhttp://jsfiddle.net/hgJ68/

Answer 2

全部は書きませんが、基本的な考え方は次のとおりです。

* { margin: 0; padding: 0;}
#session-nav {
    width: 100%;
    background: #bdc3c7;
}
/* make the li's display inline */
#session-nav li {
    display: inline-block; 
}

/* remove the underline from the links */
#session-nav li a {
    text-decoration: none;
}

/* add a background */
.session1 {
    background: #2ecc71;
}

.session2 {
    background: #e67e22;
}

.session3 {
    background: #f1c40f
}

デモ