下拉菜单效果如下
image.png
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
.bg{
width: 100%;
height: 50px;
background-color:antiquewhite;
display: flex;
justify-content: center;
}
.nav{
width: 800px;
height: 50px;
background-color:azure;
display: flex;
justify-content: start;
/* 标签之间有空隙 */
gap: 20px;
list-style: none;
}
.item{
height: 50px;
padding: 0 50px;
position: relative;
background-color: blueviolet;
}
.children{
width: 70px;
height: 70px;
position: absolute;
background-color:aqua;
display: none; /* 默认隐藏子菜单 */
list-style: none; /* 移除默认的列表样式 */
padding: 0; /* 移除默认的padding */
top: 50px; /* 子菜单在父菜单下方显示 */
left: 0; /* 子菜单与父菜单对齐 */
}
.item:hover .children {
display: block; /* 鼠标悬停时显示子菜单 */
}
</style>
</head>
<body>
<div class="bg">
<ul class="nav">
<li class="item">主页
<ul class="children">
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
<li class="item">文章
<ul class="children">
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
<li class="item">相册
<ul class="children">
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
<li class="item">留言
<ul class="children">
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
小小总结
就是隐藏与显现出问题，好在经过与AI的探讨下解决了问题
