爱站程序员基地首先写个基本结构：
<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>
