1.效果:js实现菜单下拉框,当鼠标放到上面是显示菜单,当鼠标移除时隐藏菜单
新浪下拉菜单.png
2.布局分析
image.png
<body>
<div class="nav">
<div class="weibo">
<a href=""><span>微博</span></a>
<ul>
<li>
<a href=""><span>私信</span></a>
</li>
<li>
<a href=""><span>评论</span></a>
</li>
<li>
<a href=""><span>@我</span></a>
</li>
</ul>
</div>
<div class="blog">
<a href=""><span>博客</span></a>
<ul>
<li>
<a href=""><span>博客评论</span></a>
</li>
<li>
<a href=""><span>未读提醒</span></a>
</li>
</ul>
</div>
<div class="mail">
<a href=""><span>邮箱</span></a>
<ul>
<li>
<a href=""><span>免费邮箱</span></a>
</li>
<li>
<a href=""><span>企业邮箱</span></a>
</li>
<li>
<a href=""><span>下载客户端</span></a>
</li>
</div>
</div>
</body>
3.效果实现
CSS样式分析，首先让3个div盒子浮动起来，定位方式位相对定位，为了实现鼠标放到a标签上是整个单元格变色，所以要让a标签占满整个单元格；另外为了实现字体和左边距有小空白，所以在a标签中添加一个span标签，具体的CSS样式和效果图如下：
image.png
<style>
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
/* 让a标签沾满整个单元格 */
a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.nav {
width: 400px;
margin: 50px auto;
}
.nav>div {
width: 101px;
float: left;
position: relative;
margin-left: 5px;
}
.nav>div>a:hover {
background-color: #eeeeee;
}
.nav>div>a span {
display: block;
padding: 5px 10px;
}
.nav>div>ul {
position: absolute;
top: 30px;
display: none;
}
.nav div ul li a {
width: 100px;
line-height: 30px;
border-left: #fecc5b 1px solid;
border-right: #fecc5b 1px solid;
border-bottom: #fecc5b 1px solid;
}
.nav>div>ul>li a:hover {
background-color: #fecc5b;
}
.nav>div>ul>li a span {
display: block;
padding-left: 10px;
}
</style>
4.js效果实现
大致思路是获取到对应的元素，当鼠标移动到其上时，显示元素，当鼠标移开时，隐藏元素，代码如下：
var nav = document.querySelector('.nav');
var divs = nav.children;
console.log(divs);
for (var i = 0; i < divs.length; i++) {
console.log(this);
divs[i].onmouseover = function () {
this.children[1].style.display = 'block';
}
divs[i].onmouseout = function () {
this.children[1].style.display = 'none';
}
}
