JS+CSS实现简单的二级下拉导航菜单效果

时间：2021-05-26

本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果。分享给大家供大家参考。具体如下：

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

具体代码如下：

<!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二级下拉导航菜单</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>

希望本文所述对大家的JavaScript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章