6.3.5 主导航

曾几何时，采用滑动门创建的主导航比较流行，时至今日，滑动门慢慢退出历史舞台，简单平滑的水平主导航开始流行。这就是传说中的三十年河东，三十年河西。

本节，通过一个实例，来演示一下水平主导航的制作方法。首先，创建一个无序列表来包裹导航链接：

<ul class = "mainnav">
   <li><a href="#">文件</a></li>
   <li><a href="#">编辑</a></li>
   <li><a href="#">查看</a></li>
   <li><a href="#">收藏夹</a></li>
   <li><a href="#">工具</a></li>
   <li><a href="#">帮助</a></li>
</ul>

首先，重置列表的默认样式，将外边距、内边距设置为 0，并去掉默认的项目符号。并让列表的 li 元素向左浮动，来构建水平列表。

. mainnav {
    margin: 0;
    padding: 0;
    list-style: none;
}
. mainnav li {
    float: left;
}

当列表的所有列表项都浮动后，它就不再占据文档流中的任何空间。因此，此时预览，列表中实际上没有内容，所有的列表项都溢出到列表的外面。

最简单的解决办法，就是使用 overflow: hidden 技术，让父元素创建一个新的块格式化上下文，来包含浮动的子元素。对于IE 6，则需要触发布局，最简单、又没有副作用的方法是设置 width: 100%。

.mainnav {
    …
    width: 100%;
    overflow: hidden;
}

为了让链接醒目，把 mainnav 元素的背景颜色设置为橙色，把链接的文本颜色设置为白色，并设置链接文本的字体，关闭链接的下划线。

.mainnav {
    …
    background: #fa7a20;
}
mainnav li a {
    color: #fff;
    text-decoration: none;
    font: 1em "Microsoft YaHei", STXihei;
}

由于列表项 li 之间的默认间距为0，链接文本全部挤在一起。可以在链接两边增加内边距，来调整链接文本之间的距离。

再为链接指定宽度，并通过 padding 让链接文本垂直居中，通过 text-align 让链接文本水平居中。

.mainnav li a {
    color: #fff;
    width: 80px;
    padding: 10px 0;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    font: 1em "Microsoft YaHei", STXihei;
}

为了提醒用户，当鼠标悬停时，自动改变链接的背景颜色。另外，为了突显当前链接，定义一个current 类，并通过不同的背景颜色进行标识，让用户一目了然。

.current {
    background: #e4393c;
}
.mainnav li a:hover {
    background: #f30;
}

最后，通过增加适当的圆角，来锦上添花。就这样，一个时尚、高端、大气、上档次，兼容所有浏览器，又很流行的网站主导航就制作完成了，制作过程很简单吧。快来欣赏一下，是不是很酷、很享受呀( ⊙ o ⊙ )！！