不用script仅用css编写无限分级弹出菜单_css

　　一直以来，我们大多使用js来实现弹出菜单，可是根据 w3c 的css标准，根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。

　　没错，就是利用 Element:hover 这个伪类。

　　注意，浏览这个例子，你必须使用标准浏览器，例如 Mozilla Firefox/ Opera 7.5

　　IE 不行!!

　　 <!DOCTYPE <a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a> PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head&gt" rel="nofollow">http://www.w3.org/1999/xhtml”><head&gt</a>; <title>css menu</title> <style type=”text/css”> /*<![CDATA[*/ ul.menu { width:180px; cursor:hand; list-style-type:none; border:1px solid #cccccc; padding:0px; margin:0px; } ul.menu li { width:100%; display:block; position:relative; } ul.menu li a { background-color:#06829C; color:#ffffff; width:100%; display:block; font-size:9pt; padding:2px; padding-left:10px; } ul.menu li ul.menu { display:none; width:190px; position:absolute; z-index:1000; left:80%; top:-10px; } ul.menu li:hover > a { width:100%; background-color:#64ACF8; color:#ffffff; } ul.menu li:hover > ul.menu { display:block; } /*]]>*/ </style></head><body> <ul class=”menu”> <li><a href=”#”>Item 1</a></li> <li> <a href=”#”>Menu Item ></a> <ul class=”menu”> <li><a href=”#”>item</a></li> <li> <a href=”#”>item ></a> <ul class=”menu”> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> </ul> </li> <li> <a href=”#”>item ></a> <ul class=”menu”> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> </ul> </li> <li> <a href=”#”>item ></a> <ul class=”menu”> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> <li><a href=”#”>menu item</a></li> </ul> </li> </ul> </li> </ul></body></html><script language=”<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>“> var now = new Date(); document.write(“<img src=’<a href="https://www.gaodaima.com/go.html?url=http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=”+escape(document.referrer)+”&rand=”+" rel="nofollow">http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=”+escape(document.referrer)+”&rand=”+</a> now.getTime() + “&cur=”+escape(document.URL)+”‘ border=’0′ alt=” width=’0′ height=’0′>”); </script> <noscript> <img src=”<a href="https://www.gaodaima.com/go.html?url=http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter&#8221" rel="nofollow">http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter&#8221</a>; border=’0′ width=’0’ height=’0’/> </noscript>
　　

　　如果你使用的IE浏览器的话就看看下面的运行效果，这是用firefox浏览得到的结果：

不用script仅用css编写无限分级弹出菜单_css

欢迎大家阅读《不用script仅用css编写无限分级弹出菜单…_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：不用script仅用css编写无限分级弹出菜单_css

Hi，您需要填写昵称和邮箱！