昨天刚刚给大家介绍了一款纯Css实现的下拉菜单,今天烈火在国外的网站看到一款挺漂亮的下拉菜单效果,查看源代码时发现,也是没有使用JS的,好了。不说费话,还是自己看效果吧。 多说一句,老外的设计,估计兄弟们不习惯,不过还是可以学习的。 CSS中的宽度和颜色自己调整哦。 网页版:猛击这里 运行版: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <title>非常好看的下拉菜单 纯CSS未使用JS - Liehuo.Net</title> <style type="text/css" /> .menu{ border:none; border:0px; margin:0px; padding:0px; font-family:verdana,geneva,arial,helvetica,sans-serif; font-size:14px; font-weight:bold; color:8e8e8e; } .menu ul{ background:url(/uploads/allimg/1007/menu-bg.gif) top left repeat-x; height:43px; list-style:none; margin:0; padding:0; } .menu li{ float:left; } .menu li a{ color:#666666; display:block; font-weight:bold; line-height:43px; padding:0px 25px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#000000; text-decoration:none; } .menu li ul{ background:#e0e0e0; border-left:2px solid #0079b2; border-right:2px solid #0079b2; border-bottom:2px solid #0079b2; display:none; height:auto; filter:alpha(opacity=95); opacity:0.95; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; width:225px; } .menu li ul a{ display:block; font-size:12px; font-style:normal; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#000000; opacity:1.0; filter:alpha(opacity=100); } .menu p{ clear:left; } .menu #current{ background:url(/uploads/allimg/1007/current-bg.gif) top left repeat-x; color:#ffffff; } </style> </head> <body> <br> <br> <div class="menu"> <ul> <li><a href="http://www.veryhuo.com" >烈火学院</a></li> <li><a href="#" id="current">产品动态</a> <ul> <li><a href="#">菜单 一</a></li> <li><a href="#">菜单 二</a></li> <li><a href="#">菜单 三</a></li> <li><a href="#">菜单 四</a></li> </ul> </li> <li><a href="#">站长之家</a> <ul> <li><a href="#">菜单 一</a></li> <li><a href="#">菜单 二</a></li> <li><a href="#">菜单 三</a></li> <li><a href="#">菜单 四</a></li> </ul> </li> <li><a href="http://www.veryhuo.com/help/lianxi.html">联系烈火</a></li> </ul> </div> </body> </html><!-- Liehuo.Net Stat --> <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 精美的网页导航菜单,鼠标经过时图片下滑不要使用的HTML标签(WEB标准网页布局)