最近在学习CSS时,学到了两级下拉菜单的制作,感觉非常有趣。下面是我分享的代码,大家可以参考一下。/*样式重置*/ *{ margin:0; padding:0; } /*设置外层容器*/ .cont
最近在学习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>
如上所述,这是一个由两级下拉菜单组成的导航栏。在这个例子中,当鼠标滑过“产品”或“联系我们”时,会弹出一个下拉菜单,显示更多选项。
感谢大家阅读本篇文章,希望这些代码能帮助到你们。
粉丝
0
关注
0
收藏
0