第一次做导航栏，把遇到的问题和解决办法进行整理。
最后效果：
注意的问题：
1.li样式的清除
2.无序列表的嵌套
3.下方代码标注注意的地方，我第一次写的时候，把height的值设为了一个定值，虽然最后的效果出来了，但是处在很多问题
没有二级菜单的它也被撑大了，这是错误的，应该把它设为100%。
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习3</title> </head> <body> <ul id="main"> <li>首页 <ul id="son"> <li>javascript</li> <li>html</li> <li>css</li> </ul> </li> <li>博客</li> <li>相册</li> <li>帮助</li> <li>关于</li> </ul> </body> </html> </body> </html>
<style type="text/css"> #main li{ width: 100px; height: 40px; list-style-type: none; background-color: #037F01; color: white; text-align: center; line-height: 40px; z-index: 2; overflow: hidden; } #son li{ margin-left: -40px; display: block; background-color: #8FE3FE; color: white; z-index: 1; display: none; } #main li:hover{ width: 100px;
/*注意*/
height: 100%; background-color: #F5F3DD; color: #A8C66A; } #main li:hover #son li{ display: block; } #son li:hover{ background-color: #0846A2; color: white; height: 40px; } </style>