实现一级菜单掠过显示二级菜单的方法

最新推荐文章于 2024-07-24 17:16:26 发布

caichenglong123

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量618

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/u013521540/article/details/84754655

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="ico.ico" rel="shortcut icon">
<link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="nav.js"></script>
<title>测试页面</title>
</head>

<body>
<div class="top">
<ul id="easynav">
<li><a href="">第一个菜单</a>
<ul>
<li><a href="">第一个菜单的子菜单</a></li>
<li><a href="">第一个菜单的子菜单</a></li>
<li><a href="">第一个菜单的子菜单</a></li>
</ul>
</li>
<li>第二个菜单
<ul>
<li>第一个菜单的子菜单</li>
<li>第一个菜单的子菜单</li>
</ul>
</li>
<li>第三个菜单</li>
<li>第四个菜单</li>
<li>第五个菜单</li>
<li>第六个菜单</li>
</ul>
</div>

</body>
</html>

js代码
window.οnlοad=function(){
var oUl=document.getElementById('easynav');
for(var i=0; i<oUl.childNodes.length; i++){
childNode=oUl.childNodes[i];
if(childNode.nodeName=='LI'){
childNode.οnmοuseοver=function(){this.className='show';}
childNode.οnmοuseοut=function(){this.className='';}}
}
}

css代码
/* CSS Document */
body{ font-size:14px; font-family:"微软雅黑"; text-align:center;}

/*基本的css*/
a{ text-decoration:none; color:#fff;}
a:hover{color:#fff;}
.left{ float:left}
.right{ float:right}
.clearF{ clear:both}
.pabs{ position:absolute}
.prel{ position:relative}
.pfixed{ position:fixed}
.more a{ color:#000;}
.more a:hover{color:#1f71c5;}

/*页面的内容*/
.top{ background:#FFF; height:25px; line-height:25px; width:1000px; margin:0 auto; color:#fff;}
.top ul li{ width:150px; background:#00F; float:left; display:block;}
.top ul li a{ cursor:pointer;}

/*一级菜单显示二级菜单*/
#easynav li{ float:left; list-style:none;}
#easynav li{ display:block; width:150px; text-align:center; font-weight:bold;}
#easynav li ul { margin:0; padding:0; position:absolute; display:none; width:150px;}
#easynav li.show ul{ display:block; background:#0F0;}
#easynav li ul li{ float:left; width:150px; display:inline;}
#easynav li ul li a{ cursor:pointer;

}[size=medium][/size]