HTML中⽤CSS制作三级下拉菜单
使⽤CSS制作三级下拉菜单（先⽔平再垂直）
在⽤:hover弹出菜单时，要对两个下拉菜单的ul做区分（例如⽤ class=" "将两个ul区分），除此之外也要
对触发下拉事件的两个li做区分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>纯CSS制作三级下拉菜单</title>
</head>
<!--CSS-->
<style>
*{
padding: 0px;
margin: 0px;
}
header{
background-color: #ff9900;
width: 100%;
height: 100px;
margin-bottom: 5px;
position: relative;
}
nav{
left:160px;
background-color: yellowgreen;
font-weight: bold;
bottom: 5px;
position: absolute;
}
ul{
list-style: none;
}
ul li{
float: left;
position: relative;
}
a{
height: 40px;
line-height: 40px;
width: 100px;
text-decoration: none;html下拉菜单的制作方法
display: block;
display: block;
background-color: yellow;
text-align: center;
padding: 0px 10px;
border: 1px solid white;
}
a:hover{
background-color: green;
}
ul li ul{
position: absolute;
display: none;
}
ul li ul li{
float: none;
width: 100px;
position: relative;
}
.first:hover .content1{
display: block;
}
ul li ul li ul{
position: absolute;
left: 121px;/*这⾥为什么要⽤121px⽽不是101px*/
top: 0px;
display: none;
z-index: 1;
}
ul li ul li ul li{
float: none;
}
.second:hover .content2{
display: block;
}
</style>
<body>
<header>
<nav>
<ul>
<li class="first"><a href="#">Demons</a></li>
<li class="first"><a href="#">Faded</a></li>
<li class="first"><a href="#">Heartbeat</a>
<ul class="content1">
<li class="second"><a href="#">Good Time</a></li>
<li class="second"><a href="#">Only one</a></li>
<li class="second"><a href="#">Attention</a>
<ul class="content2">
<li><a href="#">Alone</a></li>
<li><a href="#">Skin</a></li>
<li><a href="#">Hero</a></li>
<li><a href="#">Monody</a></li>
<li><a href="#">Closer</a></li>
</ul>
</li>
<li class="second"><a href="#">Monsters</a></li>
<li class="second"><a href="#">Clarity</a></li>
</ul>
</li>
<li class="first"><a href="#">Arigato</a></li>
<li class="first"><a href="#">Stay</a></li>
</ul>
</nav>
</header>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。