十天学会HTML+CSS(第七天)：二级弹出导航菜单

今天的学习目标是小米的二级弹出导航菜单

第一步：添加盒子

首先，在横向导航后面加一个盒子<div class="nav-children"></div>，然后给它基本样式，看下效果。

.nav-children{
    width: 100%;
    height: 200px;
    background-color: orange;
}

第二步：调整位置

接着，让它相对于顶部top进行定位，这样它的宽度就变成通栏了。

.top {
    height: 40px;
    background-color: black;
    /* 相对定位 */
    position: relative;
}
.nav-children{
    width: 100%;
    height: 200px;
    background-color: orange;
    /* 绝对定位 */
    position: absolute;
    left:0;
    top:140px;
}

第三步：添加列表和样式

开始往盒子里添加内容，一个列表、六个列表项，每个列表项里一张图片、两行文本。同时，从外向内写样式。

            <div class="nav-children">
                <ul>
                    <li><a href="###">
                        <img src="./images/1.webp" alt="">
                        <p>Xiaomi手机</p>
                        <span>4999元起</span>
                    </a></li>
                    <li><a href="###">
                        <img src="./images/1.webp" alt="">
                        <p>Xiaomi手机</p>
                        <span>4999元起</span>
                    </a></li>
                    <li><a href="###">
                        <img src="./images/1.webp" alt="">
                        <p>Xiaomi手机</p>
                        <span>4999元起</span>
                    </a></li>
                    <li><a href="###">
                        <img src="./images/1.webp" alt="">
                        <p>Xiaomi手机</p>
                        <span>4999元起</span>
                    </a></li>
                    <li><a href="###">
                        <img src="./images/1.webp" alt="">
                        <p>Xiaomi手机</p>
                        <span>4999元起</span>
                    </a></li>
                    <li><a href="###">
                        <img src="./images/1.webp" alt="">
                        <p>Xiaomi手机</p>
                        <span>4999元起</span>
                    </a></li>
                </ul>
            </div>

列表ul居中，去掉前面小圆点。

.nav-children ul{
    width: 1226px;
    margin:auto;
    list-style: none;
}

所有列表项li都左浮动

.nav-children ul li{
    float:left;
}

超链接a去掉下划线、设置文字颜色大小、水平居中、顶部和右边留点距离。

.nav-children ul li a{
    display: block;
    text-decoration: none;
    color: black;
    font-size:12px;
    text-align: center;
    margin-top:30px;
    margin-right:40px;
}

最后将价格变下颜色即可。去掉整体背景色后，看下效果。

.nav-children ul li a span{
    color: red;
}

第四步：隐藏和显示效果

先将写好的二级导航隐藏，鼠标经过一级导航时出现。

.nav-children {
    width: 100%;
    height: 200px;
    /* 绝对定位 */
    position: absolute;
    left: 0;
    top: 140px;
    display: none;
}
.nav-main:hover + .nav-children{
    display: block;
}

第五步：视频教程