不用script仅用css编写无限分级弹出菜单::设计路上::网页设计、网站建设、平面设计爱好者交流学习的地方

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

作者: 佚名 来源：网络 浏览：2535 日期:2006-6-12 16:10:50

　　一直以来，我们大多使用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 xmlns="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="http://www.68design.net/art/#/">Item 1</a></li> <li> <a href="http://www.68design.net/art/#/">Menu Item ></a> <ul class="menu"> <li><a href="http://www.68design.net/art/#/">item</a></li> <li> <a href="http://www.68design.net/art/#/">item ></a> <ul class="menu"> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> </ul> </li> <li> <a href="http://www.68design.net/art/#/">item ></a> <ul class="menu"> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> </ul> </li> <li> <a href="http://www.68design.net/art/#/">item ></a> <ul class="menu"> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> <li><a href="http://www.68design.net/art/#/">menu item</a></li> </ul> </li> </ul> </li> </ul> </body> </html><script language="javascript"> 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>

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

上一篇:使用HTML制作网页必知：网页页面head区规范下一篇:CSS做一个超链接的陷下效果

推荐文章

热门文章

当前位置:首页 >> 网页教程>> HTML/CSS >> 不用script仅用css编写无限分级弹出菜单