二级标签的制作

#很多网页会用到二级标签，那么二级标签是怎么制作的，今天来介绍一下；
##首先，我们先写一组一级标签，然后在需要设置二级标签的一级标签里面嵌入一组二级标签，示例如下：

<ul class="menu">
        <li>首页</li>
        <li>新闻
            <ul class="menu_icon">
                <li>Lorem ipsum dolor sit.</li>
                <li>Lorem ipsum dolor sit.</li>
                <li>Laudantium laborum dicta mollitia?</li>
                <li>Expedita obcaecati similique omnis!</li>
            </ul>
        </li>

        <li>军事
            <ul class="menu_icon">
                <li>Lorem ipsum dolor sit.</li>
                <li>Lorem ipsum dolor sit.</li>
                <li>Laudantium laborum dicta mollitia?</li>
                <li>Expedita obcaecati similique omnis!</li>
            </ul>
        </li>
        <li>娱乐 </li>
        <li>人物</li>
        <li>游戏</li>
        <li>生活</li>
        <li>综艺</li>
        <li>汽车</li>

可见，在新闻和军事两栏里，都有二级标签的加入，那么现在我们需要再来设置它的样式。可以先把二级标签隐藏，然后在设置一级元素相对定位，二级标签绝对定位到合适的地方，为了便于分辨和页面效果，我们还可以将ul的样式去掉，把二级标签背景颜色设置一下，示例如下：

.menu li {
    list-style: none;
    position: relative;
}

.menu .menu_icon {
    display: none;
    position: absolute;
    left: 35px;
    top: 5px;
}

li:hover .menu_icon {
    display: block;
    background-color: pink;
    z-index: 1;
}

页面正常状态如下：

当鼠标移入有二级标签的位置时，显示如下：

这就是基本的二级标签设置，希望大家指正。