<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML+CSS 二级导航</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
color: #000;
display: block;
width: 140px;
height: 40px;
text-align: center;
line-height: 40px;
text-decoration: none;
}
/* ******************************************* */
.nav{
width: 100%;
height: 40px;
background-color: skyblue;
}
.nav>ul{
width: 1200px;
height: 40px;
margin: 0 auto;
/* 这个背景色是方便大家伙看的 */
/* background-color: red; */
}
.nav>ul>li{
float: left;
width: 140px;
height: 40px;
/*让ol(二级导航根据他进行定位 所以li进行相对定位)*/
position: relative;
}
.nav>ul>li>ol{
background-color: skyblue;
position: absolute;
left: 0;
top: 40px;
display: none;/*初始值隐藏*/
}
/* 悬浮的效果 */
a:hover{
color: #fff;
background-color: deepskyblue;
}
.nav>ul>li:hover>a{
color: #fff;
background-color: deepskyblue;
}
.nav>ul>li:hover>ol{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li>
<a href="">法师</a>
<ol>
<li><a href="">妲己</a></li>
<li><a href="">甄姬</a></li>
<li><a href="">安琪拉</a></li>
<li><a href="">张良</a></li>
</ol>
</li>
<li><a href="">战士</a></li>
<li>
<a href="">刺客</a>
<ol>
<li><a href="">荆轲</a></li>
<li><a href="">张飞</a></li>
<li><a href="">关羽</a></li>
<li><a href="">黄忠</a></li>
<li><a href="">马超</a></li>
<li><a href="">赵云</a></li>
<li><a href="">许诸</a></li>
</ol>
</li>
<li><a href="">射手</a></li>
<li><a href="">坦克</a></li>
<li>
<a href="">辅助</a>
<ol>
<li><a href="">蔡文姬</a></li>
<li><a href="">鬼谷子</a></li>
<li><a href="">庄周</a></li>
</ol>
</li>
</ul>
</div>
<p>HTML+CSS 二级导航</p>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)