html part <!DOCTYPE html>"en" >"UTF-8" >"viewport" content="width=device-width, initial-scale=1.0" >"stylesheet" href="index.css" >"index.js" defer></script>"content" >"#" >一级菜单1</a>"#" >二级菜单1</a></li>"#" >二级菜单2</a></li>"#" >二级菜单3</a></li>"#" >一级菜单2</a>"#" >二级菜单4</a></li>"#" >二级菜单5</a></li>"#" >一级菜单3</a>"#" >二级菜单1</a></li>"#" >一级菜单4</a>"#" >一级菜单5</a>"#" >二级菜单1</a></li>"#" >二级菜单2</a></li>"#" >二级菜单3</a></li>"#" >二级菜单4</a></li>"#" >二级菜单5</a></li>"#" >二级菜单6</a></li>"#" >二级菜单7</a></li>"#" >二级菜单8</a></li>"#" >一级菜单6</a>"#" >二级菜单1</a></li>"#" >二级菜单2</a></li>"#" >二级菜单3</a></li>"#" >二级菜单4</a></li>"#" >二级菜单5</a></li>"#" >一级菜单7</a>"#" >二级菜单1</a></li>"#" >二级菜单2</a></li>"#" >二级菜单3</a></li>"#" >一级菜单8</a>"#" >二级菜单1</a></li>"#" >二级菜单2</a></li>"#" >二级菜单3</a></li>"#" >二级菜单4</a></li>"#" >二级菜单5</a></li>"#" >二级菜单6</a></li>css part * {
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 part 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 ;
}
}
}