.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>
其实思路很容易的，先做大导航。然后做下拉菜单，但是下拉菜单默认是display：none当鼠标指向上边的大导航的项目的时候（mouseover），对应的下拉菜单的CSS样式中的display属性设置为block，mouseout的时候又置为none；其实，这样的功能根本就用不着js代码，其实，用CSS就OK了！而且通用性好！但如果你要的话，那写写给你也无妨！
以下代码：
js自动给菜单和内容的鼠标移动事件，
在HTML里没有鼠标移动的代码设置，所以，通用性好！
在菜单和内容里设置了相对应的顺序，就能直接支持！
你要改样式，只要改：#mNav .mover（移动事件）
和 #mNav .mout（离开后的样式）
<html>
<head>
<style>
#mNav {border:1px #afafffdisplay:blockwidth:600px}
#mNav li{display:inlinecursor:handwidth:100pxtext-align:centercolor:ffffff}
#mNav .mover{ background:#556ed8border:#efefff 3px outset}
#mNav .mout, #mNav li{ background:#335ea8border:#efefff 3px inset}
#mItems {border:1px #afafffwidth:600pxheight:500pxbackground:#e2efff}
#mItems div{display:none}
</style>
<script>
function initNavMenu()
{
var _mNav = document.getElementById("mNav")
for(var i=0 i <_mNav.childNodes.length i++ )
{
_mNav.childNodes[i].name=i
_mNav.childNodes[i].onmouseover=function()
{
var index= parseInt( this.name )
var _mNavs = document.getElementById("mNav")
for(var j=0 j <_mNavs.childNodes.length j++ )
_mNavs.childNodes[j].className="mout"
this.className="mover"
var _mItems = document.getElementById("mItems").childNodes
for( j=0j<_mItems.length j++)
_mItems[j].style.display="none"
_mItems[ index ].style.display="block"
}
}
document.getElementById("mItems").childNodes[0].style.display="block"
document.getElementById("mNav").childNodes[0].className="mover"
}
window.onload = function()
{
initNavMenu()//初始化菜单导航函数
}
</script>
</head>
<!--------------body ------------->
<body>
<ul id=mNav>
<li>政治</li>
<li>娱乐</li>
<li>经济</li>
<li>文化</li>
</ul>
<div id=mItems >
<div>--政治--内容---</div>
<div>--娱乐--内容---</div>
<div>--经济--内容---</div>
<div>--文化--内容---</div>
</div>
</body>
</html>
