#很多网页会用到二级标签,那么二级标签是怎么制作的,今天来介绍一下;
##首先,我们先写一组一级标签,然后在需要设置二级标签的一级标签里面嵌入一组二级标签,示例如下:
<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;
}
页面正常状态如下:
当鼠标移入有二级标签的位置时,显示如下:
这就是基本的二级标签设置,希望大家指正。