css ul li实现纵向导航菜单效果

最新推荐文章于 2021-08-04 00:41:42 发布

永远的永远次方

最新推荐文章于 2021-08-04 00:41:42 发布

阅读量5.6k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/LLLlingli/article/details/80310416

本文详细介绍了一种使用纯CSS实现的下拉菜单效果，包括菜单项的布局、样式设置及下拉菜单的显示与隐藏逻辑。通过:hover伪类和相对定位，实现了鼠标悬停时子菜单的自动展示，为网站导航提供了美观且实用的设计方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

.nav>li {
float: left;
}

.nav{
list-style: none;
}

.drop-down-content{
list-style: none;
}

.nav a{
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: gainsboro;
}

.drop-down-content a {
display: block;
text-decoration: none;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
color: white;
background-color: gainsboro;
}

.nav>li:first-child a {
border-radius: 0px 0 0 0px;
}

.nav>li:last-child a {
border-radius: 0 0px 0px 0;
}

.drop-down {
position: relative;
}

.drop-down-content {
display: none;
padding: 0;
position: absolute;
z-index: 9999;
}

.banner {
clear: both;
}

.drop-down-content li:hover a {
background-color: red;
} 

.nav .drop-down:hover .drop-down-content {
display: block;
left: 0;
}
</style>
</head>


<body>
<ul class="nav">
<li class="drop-down">
<a href="#">主菜单一</a>
<ul class="drop-down-content">
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
</ul>
</li>
<li class="drop-down">
<a href="#">主菜单二</a>
<ul class="drop-down-content">
<li>
<a href="#">11</a>
</li>
<li>
<a href="#">22</a>
</li>
<li>
<a href="#">33</a>
</li>
</ul>
</li>
<li>
<a href="#">主菜单三</a>
</li>
<li>
<a href="#">主菜单四</a>
</li>
<li>
<a href="#">主菜单五</a>
</li>
</ul>
<div style="width: 200px;height: 300px;border: 1px saddlebrown"></div>

</body>


</html>