GroupBlog

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航栏</title>
    </head>
    <link rel="stylesheet" href="./导航栏.css" media="screen" title="no title">
    <body>

        <div class="navBox">  <!-- 最外层盒子-->
            <div class="nav">    <!--导航栏-->
                <ul class="navList">  <!-- 列表 -->
                    <li class="navItem">
                        <a class="title">我的关注</a>
                        <div class="detail"></div><!--增加样式-->
                    </li>
                    <li class="navItem">
                        <a class="title">推荐</a>
                        <div class="detail"></div>
                    </li>
                    <li class="navItem">
                        <a class="title">导航</a>
                        <div class="detail"></div>
                    </li>
                    <li class="navItem">
                        <a class="title">视频</a>
                        <div class="detail"></div>
                    </li>
                    <li class="navItem">
                        <a class="title">购物</a>
                        <div class="detail"></div>
                    </li>
                </ul>

            </div>

        </div>
    </body>
</html>

样式：

*{
    /*去除外边框*/
    /*
    *  在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
    *  在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
    */
    padding: 0;
    margin: 0;
}

.navBox{
    width: 600px;
    height: 400px;
    /*整体居中：距离上下左右全部为0，自然居中*/
    position: absolute;/*绝对定位，自身不占空间*/
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.navBox .nav{
    height: 40px;
    border: 1px solid lightgray;
    color: darkgray
    line-height: 40px;
    background: white;
}
.navList{
    width: 100%;
    height: 100%;
    list-style: none;/*去掉小点点*/
}
.navItem{
    float: left;/*向左浮动，横向显示*/

}
.nav .title{
    margin: 0 10px;/*标题间距*/
}
.navItem .detail{
    width: 100%;
    height: 360px;
    position: absolute;
    left: 0; /*距离左侧为0，不然会漏出来一块*/
    z-index: 5;/*堆叠优先级*/
}

/*nth-child(k) 枚举子元素，赋予颜色*/
.navItem:nth-child(1) .detail{
    background: red;
}

.navItem:nth-child(2) .detail{
    background: orange;
}

.navItem:nth-child(3) .detail{
    background: yellow;
}

.navItem:nth-child(4) .detail{
    background: green;
}

.navItem:nth-child(5) .detail{
    background: blue;
}
/*hover 悬停事件*/
.navItem:hover{
    background: darkgray;
    color: white;
}

.navItem:hover .detail{
    z-index: 6;/*更改层叠优先级，使之显示在最上层*/
}