参考文章：https://blog.csdn.net/qq_41485882/article/details/82346429
鼠标覆盖时展开，展开时不会影响其他元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0px;padding:0px;}
ul{list-style-type:none;}
a{text-decoration:none;}
.container{
505px;
margin: 100px auto;
}
.layer1 li{
float: left;
100px;
height: 30px;
line-height:30px;
background-color: #9ed3c8;
border-right: 1px solid white;
text-align: center;
position: relative; /*不然会被覆盖*/
z-index: 999 ;
}
/*最后一个没有右边框*/
.layer1 li:last-child{
border-right: none;
}
.layer1 li:hover{
transition: background-color 0.2s linear;
background-color: #dc7851;
}
.layer1>li>a{
display: block;
100px;
height: 30px;
color: white;
}
.layer1>li>ul>li>a{
color: white;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="layer1">
<li id="menuitem1">
<a href="javascript:;">菜单1</a>
<ul id="list1" class="hidden">
<li><a href="javascript:;">栏目1</a></li>
<li><a href="javascript:;">栏目2</a></li>
<li><a href="javascript:;">栏目3</a></li>
<li><a href="javascript:;">栏目4</a></li>
</ul>
</li>
<li id="menuitem2">
<a href="javascript:;">菜单2</a>
<ul id="list2" class="hidden">
<li><a href="javascript:;">栏目1</a></li>
<li><a href="javascript:;">栏目2</a></li>
<li><a href="javascript:;">栏目3</a></li>
<li><a href="javascript:;">栏目4</a></li>
</ul>
</li>
<li id="menuitem3">
<a href="javascript:;">菜单3</a>
<ul id="list3" class="hidden">
<li><a href="javascript:;">栏目1</a></li>
<li><a href="javascript:;">栏目2</a></li>
<li><a href="javascript:;">栏目3</a></li>
<li><a href="javascript:;">栏目4</a></li>
</ul>
</li>
<li id="menuitem4">
<a href="javascript:;">菜单4</a>
<ul id="list4" class="hidden">
<li><a href="javascript:;">栏目1</a></li>
<li><a href="javascript:;">栏目2</a></li>
<li><a href="javascript:;">栏目3</a></li>
<li><a href="javascript:;">栏目4</a></li>
</ul>
</li>
<li id="menuitem5">
<a href="javascript:;">菜单5</a>
<ul id="list5" class="hidden">
<li><a href="javascript:;">栏目1</a></li>
<li><a href="javascript:;">栏目2</a></li>
<li><a href="javascript:;">栏目3</a></li>
<li><a href="javascript:;">栏目4</a></li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
function mylist(menuitem, list){
var menu = document.getElementById(menuitem);
var ul = document.getElementById(list);
menu.addEventListener("mouseover", function(){
ul.style.display = "block";
});
menu.addEventListener("mouseout", function(){
ul.style.display = "none";
});
}
for(var i=1; i<=5; i++){
mylist("menuitem" +i, "list" +i);
}
}
</script>
</html>