第六十八章继续折腾导航-易看设计

导航，好多时候需要有二级导航，就是鼠标滑过去会自己弹出来的那种，这个大家肯定都知道的。

咱们先别管弹不弹出来的，就让它一直显示出来，我们先完成这个效果。

那我们分析，弹出来的导航是不是在其他元素上面？是，那就要用到上一章的定位方法了，那么用哪一种？

它是相对于浏览器窗口进行定位吗？显然不是，排除固定定位（fixed）和粘性定位（sticky），那是绝对定位（absolute）还是相对定位（relative）？

那么我们在文档流中能找到一个弹出菜单占用的位置吗？是没有的，文档流中没有保留位置的是——绝对定位（absolute）。

很好，我们开始写代码：

<nav><ul><li><a href="#">首页</a></li><li><a href="#">老鼠</a></li><li><a href="#">特别</a></li><li><a href="#">帅气</a><ul><li>玉树临风</li><li>风流倜傥</li><li>堂堂正正</li></ul></li><li><a href="#">超萌</a></li><li class="clear"></li></ul></nav>

我们在列表项中再放一个列表，就是二级菜单了。这很好理解，在意思上也完全说得通。这时候我们就要注意区分子元素和后代元素了，弄明白在 CSS 中的定义对应一级菜单还是二级菜单，或者它们两个。

二级菜单有横排有纵排，为了提升难度，我们来个纵向排列吧，我们先看一下以前写的 CSS：

nav {text-align: center;background-color: #DDDDEE;}nav>ul {display: inline-block;padding: 0;margin: 0;}nav>ul li {list-style: none;float: left;}nav>ul li>a {display: block;color: #333366;text-decoration: none;padding: 10px;}

这时候你应该能够明白，最后两项中使用后代选择器是为了让整个导航中所有列表项和列表项中的链接都具有这些样式。链接没问题，但对于列表项，因为我们不打算继续横排，所以就不能让所有的列表项都 float 了，这里需要小幅修改一下：

nav {text-align: center;background-color: #DDDDEE;}nav>ul {display: inline-block;padding: 0;margin: 0;}nav>ul>li {float: left;}nav>ul>li>ul {position: absolute;padding: 10px;margin: 0;background-color: rgba(0, 0, 0, 0.8);color: #DDDDEE;}nav>ul li {list-style: none;}nav>ul li>a {display: block;color: #333366;text-decoration: none;padding: 10px;}

这样就可以了~看看效果也说的过去，但是位置呢，我希望有一些变化。于是首先回想，绝对定位元素，相对于谁定位？第一个不是静态定位的祖先元素。是谁？不知道，因为我们就没用过其他定位方式还。这就麻烦了，这不好确定位置啊！

解决的方法是：把它的父元素设置为相对定位（relative），但不进行任何偏移。那就是还在原来的位置，看不出什么变化，但是可以被作为定位的参照了。相对于父元素进行定位也就比较方便计算了。

所以我们这样写：

nav>ul>li {position: relative;float: left;}

然后对菜单进行定位，比如：

nav>ul>li>ul {position: absolute;top: 0;left: 100%;padding: 10px;margin: 0;background-color: rgba(0, 0, 0, 0.8);color: #DDDDEE;}

顶部偏移是 0，就是顶部对齐，齐头并进。左侧偏移 100%，那么首先要弄明白是谁的 100%。一般这种比例都是和父元素比，所以是父元素宽度的 100%。为什么是宽度？因为左右说的是横向的问题，就是宽度，如果是纵向，那就是高度了。

那这个位置就是和父元素顶部对齐，然后在父元素的后面了。

检查元素观察得知，位置是正确的，只是这个效果……我的二级菜单被人压扁了！我要为它主持公道，给它申明权益——所以定义它的宽度为：120px！

你会发现定义宽度之后就正常了，但是似乎，仿佛某些文字混在了一起。虽然我的背景有透明度，但是后面的文字也不应该这么明显：

这里呢，如果我们给第一级菜单的 li 元素设置了背景色的话可能就比较明显了。我们的二级菜单被别的项目挡住了，这时候我们需要通过设置 z-index 来提升一下二级菜单的层叠顺序。这个数值可以说是随便写的，不过建议整十递增，好处就是容易管理，也方便在其中插入其他数值。

nav>ul>li>ul {position: absolute;top: 0;left: 100%;z-index: 10;width: 120px;padding: 10px;margin: 0;background-color: rgba(0, 0, 0, 0.8);color: #DDDDEE;}

这样就获得了一个符合预期的效果。