`

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

    博客分类：
  • html
html 
阅读更多
<!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.onload=function(){ 
var oUl=document.getElementById('easynav');
for(var i=0; i<oUl.childNodes.length; i++){ 
childNode=oUl.childNodes[i]; 
if(childNode.nodeName=='LI'){
childNode.onmouseover=function(){this.className='show';}    
childNode.onmouseout=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]
分享到：
| jquery设置css样式、style属性 示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics