导航及悬浮层制作模板与技巧

技巧一：如图

即：悬浮层类似于从侧栏伸展出来的效果

<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即可