不使用js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="show.css"/>
</head>
<body>
<nav>
<ul id="first">
<li class="one"><a href="">選單 1</a>
<ul>
<li class="two">
<a href="">選單 1-1</a>
<ul>
<li class="three"><a href="">選單 1-1-1</a></li>
<li class="three"><a href="">選單 1-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 1-2</a>
<ul>
<li class="three"><a href="">選單 1-2-1</a></li>
<li class="three"><a href="">選單 1-2-2</a></li>
</ul></li>
<li class="two"><a href="">選單 1-3</a></li>
</ul>
<li class="one">
<a href="">選單 2</a>
<ul>
<li class="two">
<a href="">選單 2-1</a>
<ul>
<li class="three"><a href="">選單 2-1-1</a></li>
<li class="three"><a href="">選單 2-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 2-2</a></li>
<li class="two"><a href="">選單 2-3</a></li>
</ul>
<li class="one"><a href="">選單 3</a>
<ul>
<li class="two">
<a href="">選單 3-1</a>
<ul>
<li class="three"><a href="">選單 3-1-1</a></li>
<li class="three"><a href="">選單 3-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 3-2</a></li>
<li class="two"><a href="">選單 3-3</a></li>
</ul>
<li class="one"><a href="">選單 4</a>
<ul>
<li class="two">
<a href="">選單 4-1</a>
<ul>
<li class="three"><a href="">選單 4-1-1</a></li>
<li class="three"><a href="">選單 4-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 4-2</a></li>
<li class="two"><a href="">選單 4-3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>li{
background:blue;
width:100px;
height:50px;
line-height: 50px;
list-style: none;
position:relative;
text-align:center;
border:0.1px white solid;
}
li:hover{
background: lightblue;
}
a{
color:white;
font-size:20px;
text-decoration: none;
}
.one{
display:inline-block;
}
ul{
display:none;
}
#first{
display: block;
}
li.one:hover >ul{
display:block;
position:absolute;
left:-40px;
top:100%;
}
li.two:hover >ul{
display:block;
position:absolute;
left:60%;
top:0px;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
