文档介绍：纯CSS下拉菜单和右拉菜单的实现方法下拉和右拉菜单是网页当中最为常见的组件为便于理解,两个例子都只写了基本样式,实际应用时可以添加符合页面风格的美化样式,【】给大家讲解一下实现思路。以下两例公用样式:<style>body,ul{margin:0px;padding:0px;}li{list-style:none;}a{text-decoration:none;}</style>一、纯CSS实现下拉菜单本例实现效果CSS代码#nav{height:18px;}#navli{float:left;display:inline;}.list{background:#FFF;}.menu{height:18px;padding-left:10px;padding-right:10px;overflow:hidden;}.menu:hover{height:auto;}.menu:{position:absolute;z-index:1;}.lista{display:block}HTML代码<h3>下拉菜单示例</h3> <ulid="nav"> <liclass="menu">菜单项目<divclass="list"> <ahref="#">菜单项目</a><ahref="#">菜单项目</a> </div> </li> <liclass="menu">菜单项目 <divclass="list"> <ahref="#">菜单项目</a><ahref="#">菜单项目</a> </div> </li> <liclass="menu">菜单项目<divclass="list"> <ahref="#">菜单项目</a><ahref="#">菜单项目</a><ahref="#">菜单项目</a> </div> </li> <liclass="menu">菜单项目<divclass="list"> <ahref="#">菜单项目2</a><ahref="#">菜单项目</a><ahref="#">菜单项目</a> </div> </li> </ul>实现关键点:一级导航指定固定高度,并将超出部分隐藏:.menu{height:18px;overflow:hidden;};通过hover事件将高度属性改为auto:.menu:hover{height:auto;};为了二级菜单显示时不影响其他节点的位置,通过position:absolute将二级菜单踢出文档流,并指定其优先层级menu:{position:absolute;z-index:1;}-v{position:relative;width:100px;height:18px;padding-left:10px;padding-right:10px;}.list-v{background:#fff;display:none;width