<style>
#first{
display: flex;
justify-content:space-between;
}
li{
list-style-type:none ;
border: 1px solid #999;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: pink;
color: white;
}
div{
display: flex;
justify-content: space-between;
}
.active{
background-color: darkgrey;
}
.show{
display: block;
}
.style{
display: none;
}
li>ul{
display: none;
margin-left: -41px;
}
</style>
</head>
<body>
<ul id="first">
<li onmouseover="hov('one',this)" onmouseout="out('one',this)">列表一 //给每个菜单栏设置鼠标移入移出事件
<ul id="one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li onmouseover="hov('two',this)" onmouseout="out('two',this)">列表二
<ul id="two">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</li>
<li onmouseover="hov('three',this)" onmouseout="out('three',this)">列表三
<ul id="three">
<li>55</li>
<li>66</li>
<li>77</li>
<li>88</li>
</ul>
</li>
<li onmouseover="hov('four',this)" onmouseout="out('four',this)">列表四
<ul id="four">
<li>88</li>
<li>433</li>
<li>222</li>
<li>124</li>
</ul>
</li>
</ul>
<script>
function hov(id1,e){
var num = document.querySelector("#" + id1);
num.className="show";
e.className="active";
}
function out(id1,e){
var num = document.querySelector("#" + id1);
num.className="";
e.className="";
}
</script>
</body>
</html>
使用鼠标移入移出事件，，，，，，，，，，，，，，，