HTML/CSS实现下拉菜单

HTML/CSS实现下拉菜单_第1张图片

HTML部分:

<body>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">课程大厅</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">Jquery</a></li>
                    <li><a href="#">Ajax</a></li>
                    <li><a href="#">AjaxAjaxAjaxAjax</a></li>
                </ul>
            </li>
            <li><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">Jquery</a></li>
                    <li><a href="#">Ajax</a></li>
                    <li><a href="#">AjaxAjaxAjaxAjax</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>

CSS部分:

*{
    margin:0;
    padding:0;
}
#nav{
    background-color: #ccc;
    width: 600px;
    height: 40px;
    margin:0 auto;
}
ul li{
    list-style: none;
    float: left;
    /*width:90px;*/
    /*padding:0 10px;*/
    line-height: 40px;
    text-align: center;
    position: relative;
}
a{
    padding:0 10px;
    text-decoration: none;
    color: #000;
    display: block;//块级元素
    height:40px;
}
a:hover{
    color: #fff;
    background-color: #666;
}
ul li ul li{
    float: none;
    background-color: #eee;
    margin-top:2px;
}
ul li ul{
    position:absolute;
    left: 0;
    top:40px;
    display: none;
}
ul li ul li a:hover{
    background-color: #06F;
}
ul li:hover ul{
    display: block;
}


你可能感兴趣的:(html)