1.设置body部分(block>ul.menu>li>span)
<body>
<div class="block">
<ul class="menu">
<li>
<span>卡一</span>
</li>
<li>
<span>卡二</span>
</li>
<li>
<span>卡三</span>
</li>
<li>
<span>卡四</span>
</li>
<li>
<span>卡五</span>
</li>
</ul>
</div>
</body>
2.设置通用样式
*{
margin: 0;
padding: 0;
}
3.设置样式 (block>ul.menu>li>span)
.block{
margin: auto;
width: 500px;
height:400px;
position: relative;/*外部容器设为相对定位*/
}
.menu>li{
width: 100px;
height: 25px;
list-style: none;
float: left;
text-align: center;
border: 1px solid silver;
box-sizing: border-box;
}
.menu>li>span{
width: 100px;
height: 25px;
position: relative;/*设为相对位置*/
z-index: 2;/*设置显示层次,用以出现在最外层*/
display: block;
box-sizing: border-box;
}
4.设置鼠标伪类
.menu>li:hover{
color: red;
cursor: pointer;/*鼠标悬停时变成抓手*/
border-color: red red white red;/*设置四边框,上右下左,红红白红*/
}
.menu>li:hover span{
border-bottom: 1px solid white;
}
效果如下 :
5.设置内嵌列表
<ul class="menu">
<li>
<span>卡一</span>
<div class="menu-1">卡一</div>/*内嵌列表*/
</li>
<li>
<span>卡二</span>
<div class="menu-1">卡二</div>
</li>
<li>
<span>卡三</span>
<div class="menu-1">卡三</div>
</li>
<li>
<span>卡四</span>
<div class="menu-1">卡四</div>
</li>
<li>
<span>卡五</span>
<div class="menu-1">卡五</div>
</li>
</ul>
效果如下:
6.设置menu-1样式
.menu-1{
border: 1px solid red;
width: 500px;
height: 375px;
position: absolute;/*设置绝对定位*/
left: 0;
top: 25px;
display: none;/*设置容器内容隐藏*/
text-align: left;
}
7.设置鼠标悬停
.menu>li:hover .menu-1{
display: block;/*设置模块内容显示*/
}
.menu>li:hover span{
border-bottom: 1px solid white;
}
最终效果如下图: