纯CSS实现的二级下拉菜单效果代码实例_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:31:03
Original
1788 Leute haben es durchsucht

纯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>
Nach dem Login kopieren

以上代码实现下拉菜单效果,但是IE6浏览器下不兼容,因为IE6不支持li:hover,支持超链接的:hover。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10894

更多内容可以参阅:http://www.softwhy.com/divcss/

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage