技巧一:如图
即:悬浮层类似于从侧栏伸展出来的效果
<li>
<a href="#">XX</a><span></span>
<div class="悬浮层"></div>
</li>
.menu li:hover .submenu{display: block;}
.submenu{
display: none;
padding-left: 20px;
width: 500px;
border:1px solid #999;
position: absolute;
top:35px;
left:198px;
z-index:2;
background-color: white;
}
.menu li:hover span{
/*vertical-align: middle;*/
position:relative;
background-color: white;
height: 28px;
width:10px;
/*right:0;
left: auto;
这样不行...why?
*/
float:right;
z-index: 3;
display: inline-block;
}
通过设置一个有背景颜色的内联元素,去遮盖边框
注意:
1、导航层display:relative,悬浮层display:block,并且left的距离稍稍小于导航的宽度
2、span的position:relative并且需要float:right
3、span的层级要高于悬浮层的层级
技巧二:如图
即:dt dd垂直对齐问题
<dl class="subitem">
<dt ><a href="#">智能数码</a></dt>
<dd><a href="#">智能设备</a>
<a href="#">智能手表</a>
<a href="#">智能手环</a>
<a href="#">智能健康</a>
<a href="#">智能机器人</a>
<a href="#">智能设备</a>
<a href="#">智能设备</a>
<a href="#">智能设备</a></dd>
</dl>
.submenu .subitem dt{
font-size: 13pt;
float: left;
text-align: right;
vertical-align: middle;
padding-right:10px;
height: 28px;
line-height: 28px;
}
.submenu .subitem dd a{
font-size: 10pt;
height: 18px;
line-height: 17px;
margin:5px 0;
padding: 0 5px;
border-left: 1px solid #ccc;
vertical-align: middle;
}
注意:
1、设置不同的高度(与行高),否则竖线阴影会和dt一样高
2、通过(dt的height减去a的height)/2 作为magin-top,和margin-bottom来调整高度,使二者对齐
(或者通过margin-top:负像素 来调整)
技巧三:如图
即:使底边线不紧挨侧边
<div class="shopClass_list hide">
<div class="shopClass_cont">
<dl class="shopList_item">
<dt>电脑整机</dt>
<dd>
<a href="#">笔记本</a>
<a href="#">平板电脑</a>
<a href="#">台式机</a>
<a href="#">超极本</a>
<a href="#">上网本</a>
</dd>
</dl>
</div>
</dv>
注意:
就是通过再嵌套一层div,使内层的div有border-bottom,而外层的div有padding-left,padding-right即可