纯 CSS 下拉菜单和右拉菜单的实现方法
下拉和右拉菜单是网页当中最为常见的组件
为便于理解,两个例子都只写了基本样式,实际应用时可以添加符合页面风格的美化样式,
【Jtwlyx.com】给大家讲解一下实现思路。
以下两例公用样式:
<style>
body,ul{margin:0px;padding:0px;}
li{list-style:none;}
a{text-decoration:none;}
</style>
一、纯 CSS 实现下拉菜单
本例实现效果
CSS 代码
#nav{height:18px;}
#nav li{float:left;display:inline;}
.list{background: #FFF;}
.menu{height:18px;padding-left:10px;padding-right:10px;overflow:hidden;}
.menu:hover{height:auto;}
.menu:hover .list{position:absolute;z-index:1;}
.list a{display:block}
HTML 代码
<h3>下拉菜单示例</h3>
<ul id="nav">