您的位置：首页 > Web前端 > CSS

导航下拉菜单 html/css

2016-05-30 23:42 447 查看


不使用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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  导航下拉菜单 导航 前端 css
相关文章推荐
新的分享
章节导航