一 . 思路分析:
1.导航栏里面的li都要有鼠标经过事件
2.当鼠标经过li时,里面的ul显示,离开时隐藏
二.效果展示
三.代码
<style>
*{
margin: 0px;
padding: 0px;
}
.nav{
background-color:#FCFCFC;
width: 300px;
height: 40px;
margin: 0 auto;
}
ul{
list-style: none;
}
ul li{
float:left;
line-height: 40px;
text-align: center;
position: relative;
width: 100px;
}
a{
text-decoration: none;
color: black;
display:block;
padding: 0px 10px;
height: 40px;
}
a:hover{
/* 设置鼠标指针在其上的颜色 */
background-color: #FCFCFC;
color: #FF934E;
}
ul li ul li{
float: none;
background-color: white;
}
ul li ul{
position: absolute;
top: 40px;
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var nav=document.querySelector('.nav');
var lis=nav.children;
for(i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
this.children[1].style.display='block';
}
lis[i].onmouseout=function(){
this.children[1].style.display='none';
}
}
}
</script>
<body>
<ul class="nav">
<li >
<a href="#">微博</a>
<ul>
<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>
</ul>
</li>
<li >
<a href="#">邮箱</a>
<ul>
<li>
<a href="">免费邮箱</a>
</li>
<li>
<a href="">企业邮箱</a>
</li>
<li>
<a href="">邮箱客户端</a>
</li>
</ul>
</li>
</ul>
</body>