创建具有不同颜色的水平导航

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
}

DEMO