首先写个基本结构:
<div class="father">
父盒子
<div class="son">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</div>
</div>
然后随便搞点样式:
.father {
/* 因为子盒子我用了一个position: absolute;绝对定位,所以父盒子也要来一个position,所以这里就用了相对定位 */
position: relative;
width: 100px;
height: 30px;
padding: 5px 0px;
font-size: 25px;
text-align: center;
background-color: #eeeeee;
}
.son {
/* 用绝对定位调整子盒子的位置 */
position: absolute;
top: 40px;
left: 1px;
text-align: center;
border: 1px solid #ff0000;
}
.son a {
display: block;
padding: 5px 15px;
font-size: 25px;
text-decoration: none;
color: #000000;
}
.son a:hover {
color: #ff0000;
}
现在运行结果如下:
核心部分:
要实现二级导航,我们需要让子盒子隐藏起来,然后鼠标经过父盒子时让子盒子显示出来,就可以实现这个二级导航的效果了
这部分代码如下:
.son {
/* 将子盒子隐藏起来 */
display: none;
/* 用绝对定位调整子盒子的位置 */
position: absolute;
top: 40px;
left: 1px;
text-align: center;
border: 1px solid #ff0000;
}
.father:hover .son {
/* 鼠标经过父盒子时让子盒子显示出来 */
display: block;
}
这样这个二级导航就做好了
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
/* 因为子盒子我用了一个position: absolute;绝对定位,所以父盒子也要来一个position,所以这里就用了相对定位 */
position: relative;
width: 100px;
height: 30px;
padding: 5px 0px;
font-size: 25px;
text-align: center;
background-color: #eeeeee;
}
.son {
/* 将子盒子隐藏起来 */
display: none;
/* 用绝对定位调整子盒子的位置 */
position: absolute;
top: 40px;
left: 1px;
text-align: center;
border: 1px solid #ff0000;
}
.son a {
display: block;
padding: 5px 15px;
font-size: 25px;
text-decoration: none;
color: #000000;
}
.son a:hover {
color: #ff0000;
}
.father:hover .son {
/* 鼠标经过父盒子时让子盒子显示出来 */
display: block;
}
</style>
</head>
<body>
<div class="father">
父盒子
<div class="son">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</div>
</div>
</body>
</html>
来源:https://www./content-4-682951.html
|