垂直纵向导航栏

第一次做导航栏，把遇到的问题和解决办法进行整理。

最后效果：

注意的问题：

　　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>

垂直纵向导航栏

推荐阅读