非常好看的下拉菜单 纯CSS未使用JS[2]

　　昨天刚刚给大家介绍了一款纯Css实现的下拉菜单，今天烈火在国外的网站看到一款挺漂亮的下拉菜单效果，查看源代码时发现，也是没有使用JS的，好了。不说费话，还是自己看效果吧。

　　多说一句，老外的设计，估计兄弟们不习惯，不过还是可以学习的。

　　CSS中的宽度和颜色自己调整哦。

　　网页版：猛击这里

　　运行版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br /> <head><br /> <meta http-equiv="content-type" content="text/html; charset=gbk" /><br /> <title>非常好看的下拉菜单 纯CSS未使用JS – Liehuo.Net</title><br /> <style type="text/css" /><br /> .menu{<br /> border:none;<br /> border:0px;<br /> margin:0px;<br /> padding:0px;<br /> font-family:verdana,geneva,arial,helvetica,sans-serif;<br /> font-size:14px;<br /> font-weight:bold;<br /> color:8e8e8e;<br /> }<br /> .menu ul{<br /> background:url(/uploads/allimg/1007/menu-bg.gif) top left repeat-x;<br /> height:43px;<br /> list-style:none;<br /> margin:0;<br /> padding:0;<br /> }<br /> .menu li{<br /> float:left;<br /> }<br /> .menu li a{<br /> color:#666666;<br /> display:block;<br /> font-weight:bold;<br /> line-height:43px;<br /> padding:0px 25px;<br /> text-align:center;<br /> text-decoration:none;<br /> }<br /> .menu li a:hover{<br /> color:#000000;<br /> text-decoration:none;<br /> }<br /> .menu li ul{<br /> background:#e0e0e0;<br /> border-left:2px solid #0079b2;<br /> border-right:2px solid #0079b2;<br /> border-bottom:2px solid #0079b2;<br /> display:none;<br /> height:auto;<br /> filter:alpha(opacity=95);<br /> opacity:0.95;<br /> position:absolute;<br /> width:225px;<br /> z-index:200;<br /> /*top:1em;<br /> /*left:0;*/<br /> }<br /> .menu li:hover ul{<br /> display:block;<br /> }<br /> .menu li li {<br /> display:block;<br /> float:none;<br /> width:225px;<br /> }<br /> .menu li ul a{<br /> display:block;<br /> font-size:12px;<br /> font-style:normal;<br /> padding:0px 10px 0px 15px;<br /> text-align:left;<br /> }<br /> .menu li ul a:hover{<br /> background:#949494;<br /> color:#000000;<br /> opacity:1.0;<br /> filter:alpha(opacity=100);<br /> }<br /> .menu p{<br /> clear:left;<br /> }<br /> .menu #current{<br /> background:url(/uploads/allimg/1007/current-bg.gif) top left repeat-x;<br /> color:#ffffff;<br /> }<br /> </style><br /> </head><br /> <body><br /> <br><br /> <br><br /> <div class="menu"><br /> <ul><br /> <li><a href="http://www.veryhuo.com" >烈火学院</a></li><br /> <li><a href="#" id="current">产品动态</a><br /> <ul><br /> <li><a href="#">菜单　一</a></li><br /> <li><a href="#">菜单　二</a></li><br /> <li><a href="#">菜单　三</a></li><br /> <li><a href="#">菜单　四</a></li><br /> </ul><br /> </li><br /> <li><a href="#">站长之家</a><br /> <ul><br /> <li><a href="#">菜单　一</a></li><br /> <li><a href="#">菜单　二</a></li><br /> <li><a href="#">菜单　三</a></li><br /> <li><a href="#">菜单　四</a></li><br /> </ul><br /> </li><br /> <li><a href="http://www.veryhuo.com/help/lianxi.html">联系烈火</a></li><br /> </ul><br /> </div><br /> </body><br /> </html><!– Liehuo.Net Stat –><br /> <div style="display:none;"><br /> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script><br /> </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href=’http://www.veryhuo.com/’ target=’_blank’>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!