成果展示
每点击首页、列表、详情、登录都会出现下拉式菜单。
未点击时为隐藏状态，不会显示
image.png
代码展示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉式菜单</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;}
html,body{
height: 100%;
width: 100%;
}
html{
font-size: 10px;
}
.head{
width: 100%;
height: 5rem;
/* background-color: aquamarine; */
display: flex;
justify-content: center;
border-bottom: 1px solid #000;
}
.main{
width: 120rem;
height: 100%;
/* background-color: aqua; */
}
.content{
list-style: none;
display: flex;
}
.children{
width: 20rem;
height: 5rem;
/* background-color: #000; */
color: #000;
font-size: 1.6rem;
padding: 0 2rem;
text-align: center;
line-height: 5rem;
/* border: solid 1px #000; */
position: relative;
}
.children:hover{
background-color: #08b3a7;
color: #fff;
cursor: pointer;
}
.menu{
list-style: none;
display: none;
position: absolute;
top: 5rem;
left: 0;
width: 20rem;
background-color: #08b3a7;
color: #333;
font-size: 1.6rem;
}
.menu li:hover{
background-color:aliceblue;
color: #08b3a7;
}
</style>
</head>
<body>
<div class="head">
<div class="main">
<ul class="content">
<li class="children">首页</li>
<li class="children">列表
<ul class="menu">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</li>
<li class="children">详情
<ul class="menu">
<li>详情1</li>
<li>详情2</li>
<li>详情3</li>
</ul>
</li>
<li class="children">登录
<ul class="menu">
<li>玩家登录</li>
<li>新人注册</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
function appearMenu(parent,is_show){
let child = parent.getElementsByClassName('menu');
if(child.length > 0){
child[0].style.display = is_show
}
}
let _list = document.getElementsByClassName('children');
for(let i = 0; i < _list.length; i++){
_list[i].onmouseenter = function(){
appearMenu(_list[i],"block");
}
_list[i].onmouseleave = function(){
appearMenu(_list[i],"none");
}
}
</script>
</body>
</html>
注意
JS部分，即
function appearMenu(parent,is_show)
{
let child = parent.getElementsByClassName('menu'
);
if(child.length > 0
){
child[
0
].style.display = is_show
}
}
let _list = document.getElementsByClassName('children'
);
for(let i = 0
; i < _list.length; i++){
_list[i].onmouseenter =
function()
{
appearMenu(_list[i],
"block"
);
}
_list[i].onmouseleave =
function()
{
appearMenu(_list[i],
"none"
);
}
}
前后要加上<script></script>，否则代码会出现错误，网页混乱
