Home > Article > Web Front-end > 纯CSS实现的二级下拉菜单效果代码实例_html/css_WEB-ITnose
纯CSS实现的二级下拉菜单效果代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:031745browse
纯CSS实现的二级下拉菜单效果代码实例:
二级下拉是最为常用的效果之一，当前的此效果一般哟结合js实现，本章节介绍一个使用纯CSS实现的二级下拉菜单效果，希望能够给需要的朋友带来一定的帮助，不过此代码也有一点浏览器兼容问题，那就是在IE6中不兼容。
代码如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">ul{ padding:0; font:15px "微软雅黑";}.item{ width:100px; padding:0 5px; border:solid 1px #eee; display:block; float:left}.item ul li{ width:100px; padding:6px 0; text-align:center; display:none; cursor:default}.item ul .f, .item:hover ul li{display:block}.item ul li:hover{background:#f0f0f0}.item:hover ul li{border-bottom:solid 1px #eee;}.item:hover ul .l, .item ul .l{border-bottom:0}</style></head><body><ul class="menu"> <li class="item"> <ul> <li class="f">文件</li> <li>打开</li> <li>关闭</li> <li>保存</li> <li>打印</li> <li class="l">退出</li> </ul> </li> <li class="item"> <ul> <li class="f">编辑</li> <li>撤销</li> <li>重做</li> <li>粘贴</li> <li>剪切</li> <li class="l">全选</li> </ul> </li> <li class="item"> <ul> <li class="f">帮助</li> <li>帮助文档</li> <li class="l">关于</li> </ul> </li></ul></body></html> 以上代码实现下拉菜单效果，但是IE6浏览器下不兼容，因为IE6不支持li:hover，支持超链接的:hover。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10894
更多内容可以参阅:http://www.softwhy.com/divcss/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS实现div固定于网页右下角实例代码_html/css_WEB-ITnoseNext article：css的after伪对象选择器简单介绍_html/css_WEB-ITnose