[分享]css两级下拉菜单

最近在学习CSS时，学到了两级下拉菜单的制作，感觉非常有趣。下面是我分享的代码，大家可以参考一下。/样式重置/ { margin:0; padding:0; } /设置外层容器/ .container...

最近在学习CSS时，学到了两级下拉菜单的制作，感觉非常有趣。下面是我分享的代码，大家可以参考一下。

/*样式重置*/
*{
    margin:0;
    padding:0;
}

/*设置外层容器*/
.container{
    margin:50px auto;
    width:960px;
}

/*制作水平导航栏*/
.nav{
    height:50px;
    line-height:50px;
}
.nav ul{
    list-style:none;
}
.nav li{
    float:left;
    position:relative;
    padding:0 20px;
}
.nav li a{
    color:#fff;
    text-decoration:none;
}
.nav > ul > li:hover{
    background-color:#ccc;
}
.nav li ul{
    display:none;
    position:absolute;
    top:50px;
    left:0;
    width:150px;
}
.nav li:hover ul{
    display:block;
}
.nav li ul li{
    float:none;
    margin:0;
} 

以上代码是我们需要的CSS代码。下面是HTML代码，用于测试CSS的效果。

<div class="container">
    <nav class="nav">
        <ul>
            <li><a href="#">主页</a></li>
            <li><a href="#">产品</a>
                <ul>
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                    <li><a href="#">产品3</a></li>
                </ul>
            </li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a>
                <ul>
                    <li><a href="#">邮箱</a></li>
                    <li><a href="#">电话</a></li>
                    <li><a href="#">地址</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div> 

如上所述，这是一个由两级下拉菜单组成的导航栏。在这个例子中，当鼠标滑过“产品”或“联系我们”时，会弹出一个下拉菜单，显示更多选项。

感谢大家阅读本篇文章，希望这些代码能帮助到你们。