html部分
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>Document</title>
<link rel="stylesheet" href="index.css" >
<script src="index.js" defer></script>
</head>
<body>
<div class="content" >
<ul>
<li>
<a href="#" >一级菜单1</a>
<ul>
<li><a href="#" >二级菜单1</a></li>
<li><a href="#" >二级菜单2</a></li>
<li><a href="#" >二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#" >一级菜单2</a>
<ul>
<li><a href="#" >二级菜单4</a></li>
<li><a href="#" >二级菜单5</a></li>
</ul>
</li>
<li>
<a href="#" >一级菜单3</a>
<ul>
<li><a href="#" >二级菜单1</a></li>
</ul>
</li>
<li>
<a href="#" >一级菜单4</a>
</li>
<li>
<a href="#" >一级菜单5</a>
<ul>
<li><a href="#" >二级菜单1</a></li>
<li><a href="#" >二级菜单2</a></li>
<li><a href="#" >二级菜单3</a></li>
<li><a href="#" >二级菜单4</a></li>
<li><a href="#" >二级菜单5</a></li>
<li><a href="#" >二级菜单6</a></li>
<li><a href="#" >二级菜单7</a></li>
<li><a href="#" >二级菜单8</a></li>
</ul>
</li>
<li>
<a href="#" >一级菜单6</a>
<ul>
<li><a href="#" >二级菜单1</a></li>
<li><a href="#" >二级菜单2</a></li>
<li><a href="#" >二级菜单3</a></li>
<li><a href="#" >二级菜单4</a></li>
<li><a href="#" >二级菜单5</a></li>
</ul>
</li>
<li>
<a href="#" >一级菜单7</a>
<ul>
<li><a href="#" >二级菜单1</a></li>
<li><a href="#" >二级菜单2</a></li>
<li><a href="#" >二级菜单3</a></li>
</ul>
</li>
<li>
<a href="#" >一级菜单8</a>
<ul>
<li><a href="#" >二级菜单1</a></li>
<li><a href="#" >二级菜单2</a></li>
<li><a href="#" >二级菜单3</a></li>
<li><a href="#" >二级菜单4</a></li>
<li><a href="#" >二级菜单5</a></li>
<li><a href="#" >二级菜单6</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
css部分
* {
margin : 0;
padding : 0;
transition : all 0.5s ease;
}
a {
text-decoration : none;
}
ul {
list-style : none;
}
.content {
width : 80%;
margin : 0 auto;
margin-top : 100px;
}
.content>ul {
display : flex;
justify-content : space-between;
}
.content>ul>li>a {
display : block;
padding : 10px 20px;
color : skyblue;
}
.content>ul>li>a:hover {
transition : 0.1s ease;
border-bottom : 4px solid skyblue;
}
.content>ul>li>ul {
height : 0;
overflow : hidden;
}
.content>ul>li>ul>li>a {
display : block;
padding : 10px 20px;
background-color : skyblue;
color : white;
}
.content>ul>li>ul>li>a:hover {
opacity : 0.8;
}
js部分
var list = document. querySelectorAll ( ".content>ul>li" ) ;
for ( let i = 0 ; i < list. length; i++ ) {
if ( list[ i] . querySelector ( "ul" ) ) {
list[ i] . onmouseover = function ( ) {
this . querySelector ( "a" ) . style. borderBottom = "4px solid skyblue" ;
var y = this . querySelectorAll ( "ul>li" ) . length;
this . querySelector ( "ul" ) . style. height = 41 * y + "px" ;
}
list[ i] . onmouseleave = function ( ) {
this . querySelector ( "a" ) . style. borderBottom = "none" ;
this . querySelector ( "ul" ) . style. height = 0 ;
}
}
}