二级导航
详细实现方法如下：
首先在html中写出一级菜单列表，然后在每个一级菜单中再嵌套一个列表即可创建一个二级菜单。
index.html
<div class="menu"> <ul> <li><a href="">一级菜单</a> <ul> <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> </li> <li><a href="">一级菜单</a> <ul> <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> </li> <li><a href="">一级菜单</a> <ul> <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> </li> </ul> </div>
接着写样式文件，紧张是对列表样式和位置进行修正
<style> {padding: 0;/内边距:分别左,上,右,下都为0,这样就不会涌现旁边高下内间距/margin: 0/外边距:分别左,上,右,下都为0,这样就不会涌现旁边高下间距/}.menu ul li {list-style: none;/列表样式/background-color: burlywood;/背景颜色/width: 120px;/宽度/text-align: center;/文本对齐:居中/height: 40px;/高度/position: relative/定位:一样平常用这个就可以绝对定位/}.menu ul li a {text-decoration: none;/超链接下划线:无/display: block;/显示:正常显示用block,隐蔽none/line-height: 40px}.menu ul li:hover {background-color: aqua}.menu ul li ul {display: none;position: absolute;left: 120px;top: 0}.menu ul li:hover ul {display: block}</style>
这里须要把稳的是一级菜单列表的定位办法要设置为relative,二级菜单列表的定位办法要设置为absolute，这样二级菜单才会在一级菜单相对的位置涌现。
然后通过display这个属性掌握二级菜单的显示和隐蔽就可以了。
下一个文章：轮播图
