html二级导航的原理,二级导航用CSS的实现方法

首先写个基本结构：

父盒子

链接1

链接2

链接3

链接4

链接5

然后随便搞点样式：

.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;

}

这样这个二级导航就做好了

完整代码如下：

Document

.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;

}

父盒子

链接1

链接2

链接3

链接4

链接5

来源：https://www.icode9.com/content-4-682951.html