不用script僅用css編寫無限分級彈出菜單

2024-04-27 13:55:32

字體：大中小

來源：轉載

供稿：網友

　　一直以來，我們大多使用js來實現彈出菜單，可是根據 w3c 的CSS標準，根本就沒有這個必要。只需要簡單得使用css+html就可以做出一個無限分級的彈出菜單。

　　沒錯，就是利用 Element:hover 這個偽類。

　　注意，瀏覽這個例子，你必須使用標準瀏覽器，例如 Mozilla Firefox/ Opera 7.5

　　IE 不行!!

　　 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html <a href="http://m.survivalescaperooms.com/xml.asp">xml</a>ns="http://www.w3.org/1999/xhtml"><head> <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><scr<a >ip</a>t language="<a href="http://m.survivalescaperooms.com/article.asp?typeid=160">java</a>script"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>

上一篇：CSS做一個超鏈接的陷下效果

下一篇：CSS+DIV設計實例：純CSS制作下拉導航菜單