.clearfix::after {
display: block
content: ""
clear: both
}
ul,
li {
list-style: none
}
.nav>li {
float: left
margin: 0 10px
}
.nav>li ul {
display: none
}
</style>
</head>
<body>
<ul class="nav clearfix">
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
<script>
//案例分析：导航栏里面的li都要有鼠标经过效果 所以需要循环注册鼠标事件
//核心原理：当鼠标经过li里面的第二个孩子ul显示 当鼠标离开 ul隐藏
var nav = document.querySelector('.nav')
var lis = nav.children
for (var 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>
不算太明白你说的意思，你可以把代码贴出来吗？你可以看一下，我的这个代码，不知道是不是你想要的效果啊。<!DOCTYPE HTML>
<html>
<head>
<title>Tab切换</title>
<style>
*{margin:0padding:0}
#box{width:450pxmargin:20px auto}
input{width:120pxborder:1px solid black}
.contents{width:450pxheight:100pxborder:1px solid blackdisplay:none}
</style>
<script>
window.onload=function()
{
var box=document.getElementById('box') //这里要获取box,是为了下面选择DOM元素时，减少寻找范围，提高速度，也就提高性能了
aBtn=box.getElementsByTagName('input'),
aCont=box.getElementsByTagName('div') //生明多个变量时，尽量用一个var
/*
下面是处理程序，原理是为每个按钮添加一个onclick事件，监听哪个按钮触发了，就触发哪个处理程序
*/
for(var i=0i<aBtn.lengthi++)
{
aBtn[i].index=i
aBtn[i].onclick=function()
{
//onclick时，先要把三个DIV全隐藏起来
for(var j=0j<aCont.lengthj++)
{
aCont[j].style.display='none'
}
//然后再让目标DIV显示出来
aCont[this.index].style.display='block'
}
}
}
</script>
</head>
<div id="box">
<input type="button" value="按钮1" />
<input type="button" value="按钮1" />
<input type="button" value="按钮1" />
<div class="contents" style="display:block">内容一</div>
<div class="contents" >内容二</div>
<div class="contents" >内容三</div>
</div>
</html>
其实思路很容易的，先做大导航。然后做下拉菜单，但是下拉菜单默认是display：none当鼠标指向上边的大导航的项目的时候（mouseover），对应的下拉菜单的CSS样式中的display属性设置为block，mouseout的时候又置为none；
