简洁黑白的下拉菜单效果,CSS+JS代码实现

发布时间：2018-08-20 19:27:51 所属栏目：政策来源：站长网

导读：一款简洁黑白的下拉菜单效果,CSS+JS代码实现，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了Js哦，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。演示： !DOCTYPE html PUBLIC

　　一款简洁黑白的下拉菜单效果,CSS+JS代码实现，好像CSS要配合JS才能写出好效果来，本款菜单同样用到了Js哦，菜单目前支持两级，下拉导航是我们经常用的一种菜单形式，把这个修改一下你就能用了，结构挺简单，相信你会做好的。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS二级下拉导航菜单 - 烈火学院 Liehuo.Net</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';} #mainNavBar{width:100%;background:#999;padding:10px 0;} #nav{width:760px;height:30px;margin:0 auto;} #nav ul{padding:0;margin:0;} #nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;} #nav ul li a{display:block;color:#fff;text-decoration:none;} #nav ul li a:hover{font-weight:bold;background:#666;} #subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;} #subNav a{text-decoration:none;font-weight:normal;display:block;} #subNav a:hover{color:#f00;background:#f00;} </style> </head> <body> <div id="mainNavBar"> <div id="nav"> <ul> <li> <a href="#">添加</a> <div id="subNav"> <a href="#">日志</a> <a href="#">分类</a> </div> </li> <li> <a href="#">管理</a> <div id="subNav"> <a href="#">分类</a> <a href="#">文章</a> </div> </li> <li> <a href="#">扩展</a> <div id="subNav"> <a href="#">评论管理</a> <a href="#">留言管理</a> <a href="#">注销退出</a> </div> </li> </ul> </div> </div> <script language="javascript"> var nav=document.getElementById("nav").getElementsByTagName("li"); for(i=0;i<nav.length;i++){ nav[i].onmouseover=function(){ this.style.fontWeight="bold"; this.style.overflow="visible"; this.style.background="#666666"; } nav[i].onmouseout=function(){ this.style.fontWeight="normal"; this.style.background="#999999" this.style.overflow="hidden"; } } </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武汉站长网）

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