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

发布时间：2018-08-21 10:09:44 所属栏目：政策来源：站长网

导读：昨天刚刚给大家介绍了一款纯Css实现的下拉菜单，今天烈火在国外的网站看到一款挺漂亮的下拉菜单效果，查看源代码时发现，也是没有使用JS的，好了。不说费话，还是自己看效果吧。多说一句，老外的设计，估计兄弟们不习惯，不过还是可以学习的。 CSS中的宽

　　昨天刚刚给大家介绍了一款纯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> <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>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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