CSS横向导航菜单实例教程2，又一款css导航菜单。
- <ul id="nav">
- <li><a href="http://www.alixixi.com/">Div+CSS教程</a></li>
- <li><a href="http://www.alixixi.com/" id="current">CSS布局实例</a></li>
- <li><a href="http://www.alixixi.com/">CSS2.0教程</a></li>
- <li><a href="http://www.alixixi.com/">CSS酷站欣赏</a></li>
- <li><a href="http://www.alixixi.com/">CSS模板下载</a></li>
- <li><a href="http://www.alixixi.com/">CSS在线手册</a></li>
- <li><a href="http://www.alixixi.com/">Web标准</a></li>
- <li><a href="http://www.alixixi.com/">XHTML教程</a></li>
- </ul>
看看 CSS代码：
- * {
- font-size:12px;
- text-align:center;
- }
- #nav {
- width:683px;
- margin:20px auto 0 auto;
- border:1px solid #ccc;
- border-right:none;
- }
- #nav li {
- display: inline;
- list-style-type: none;
- }
- #nav li a:link,#nav li a:visited {
- float:left;
- padding:3px 10px;
- text-decoration: none;
- color:#bbb;
- background:#f0f0f0;
- border-right:1px solid #ccc;
- }
- #nav li a:hover {
- color:#fff;
- background:#06c;
- }
- #nav li a#current {
- color:#fff;
- background:#f60;
- }
我们来看看分析重要的 部分：
无序列表UL的边框为一象素的实线，颜色是#ccc，但是右边框线为无。
这是为我们的菜单元素的边框留下位置。
- #nav {
- border:1px solid #ccc;
- border-right:none;
- }
- #nav li a:link,#nav li a:visited {
border-right:1px solid #ccc;
}
链接元素，我们设置了右边框为一象素的实线，颜色是#ccc。
这就形成了一个封闭的区域作为链接元素的容器。看上去还不错。
- #nav li a#current {
- color:#fff;
- background:#f60;
- }
这表示链接元素中id为current的属性。文字颜色是#fff，背景色是#f60。
这一设置是我们应该记住的东西，它可以设置为当前页面的菜单的id。例如我们现在位于CSS教程这一版块。我们就将“CSS教程”菜单的id设为current。它就会以区别于其它菜单的样式来显示。这样的设置还有其它的方法，可以给body赋予一个id。即可以控制整个页面中需要标注的部分，这样的知识我们在以后的文章是再详细介绍的。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css
， background
， 菜单
， 教程
， 元素
， 横向导航
nav
css 横向二级导航菜单、横向导航下拉菜单css3、css导航下拉菜单横向、css横向导航菜单、css横向滑动菜单，以便于您获取更多的相关知识。