菜单栏.jpg
前文导航栏全解析中我们做了水平和垂直的导航栏，现在我们做一下水平和垂直的菜单栏。菜单栏与导航栏区别不大，只要在导航栏的条目上加上菜单即可。
我们先上垂直导航栏的代码，在上面加菜单。不会做垂直导航栏，点这里。
HTML
<ul>
<li>精选</li>
<li>女装</li>
<li>鞋包</li>
<li>男士</li>
<li>运动</li>
<li>饰品</li>
<li>美妆</li>
<li>母婴</li>
<li>居家</li>
<li>国际</li>
<li>生活</li>
<li>预告</li>
</ul>
CSS
ul {
border: 1px solid gray;
list-style: none;
padding-left: 0;
display: inline-block;
padding: 10px;
border-radius: 5px;
}
li {
padding: 10px;
}
li:hover {
background-color: #999;
cursor: pointer;
border-radius: 5px;
color: #fff;
font-weight: bold;
}
效果如下图：
我们在【精品】中加上三个菜单
<li>精选
<ul class="menu">
<li>精选男装</li>
<li>精选女装</li>
<li>精选童装</li>
</ul>
</li>
效果如下：
新加的菜单把原来的导航栏撑开，我们在菜单上加上绝对定位。
.menu {
position: absolute;
}
为了使菜单参照导航栏的条目定位，我们在导航栏的li上加上相对定位。
position : relative;
效果如下：
菜单的宽度有些不够，我们来设置一下，给
.menu加个宽度。
width: 90px;
看上去宽度差不多吧，位置菜单有些问题，默认菜单在li的左下角，我们要把它移动到右上角。需要距离top 0；距离left 100%。
top: 0;
left: 100%;
导航栏的线在菜单中显示，我们给菜单加上个白色背景色。
background: #fff;
样子差不多了。但是鼠标放到菜单上，菜单上的字没了。
原因是我们在li:hover上把字体颜色设置成了白色。我们只要给.menu加个颜色，就可以解决这个问题。
color: #000;
这里的字体变粗也是导航栏li:hover既存特效。可以不改变，如果想改变，加个font-weight:normal即可。
菜单基本上成型，最后我们只需要加上显示控制即可。默认菜单隐藏。
display: none;
鼠标放到导航栏的li上显示。
li:hover .menu {
display: inline-block;
}
OK，我们的垂直菜单栏好了。
如果想给【女装】加上菜单怎么做呢？
这个更简单，只要给【女装】的li嵌套一个无序列表即可。
<li>女装
<ul class="menu">
<li>春季女装</li>
<li>夏季女装</li>
<li>秋季女装</li>
<li>冬季女装</li>
</ul>
</li>
简单把后面的菜单只需要加上
menu这个类，一切都是菜单了。
代码总结
HTML
<ul>
<li>精选
<ul class="menu">
<li>精选男装</li>
<li>精选女装</li>
<li>精选童装</li>
</ul>
</li>
<li>女装
<ul class="menu">
<li>春季女装</li>
<li>夏季女装</li>
<li>秋季女装</li>
<li>冬季女装</li>
</ul>
</li>
<li>鞋包</li>
<li>男士</li>
<li>运动</li>
<li>饰品</li>
<li>美妆</li>
<li>母婴</li>
<li>居家</li>
<li>国际</li>
<li>生活</li>
<li>预告</li>
</ul>
CSS
ul {
border: 1px solid gray;
list-style: none;
padding-left: 0;
display: inline-block;
padding: 10px;
border-radius: 5px;
}
li {
padding: 10px;
position: relative;
}
li:hover {
background-color: #999;
cursor: pointer;
border-radius: 5px;
color: #fff;
font-weight: bold;
}
.menu {
position: absolute;
width: 90px;
top: 0;
left: 100%;
background: #fff;
color: #000;
display: none;
}
li:hover .menu {
display: inline-block;
}
如果我们要做成水平菜单栏，怎么做了？
修改li的display把垂直导航栏改成水平导航栏
display: inline-block;
导航栏变成水平的了，但是菜单显示在右上角，有些合适了。改到左下角显示比较好。
left: 0;
top: 100%;
两步完成了“华丽转身”，帅吧。
童鞋们多加练习体会当中的每一步，实际使用中可能不需要一些步骤（如设置字体或者背景颜色）。但是，基本流程很清晰的。大家试一下吧。
如有问题请留言，如有帮助请点赞。
