京东顶部二级菜单的写法举例

第一篇文章，简单分享一下我最近在练习的京东顶部二级菜单

类似这种：

先说一下个人简单理解的布局，拿“客户服务”这个二级菜单来说，创建一个新div，设置好固定的宽高，这个div有两个子元素，一个是a标签，a标签放的是客户服务这个超链接，另一个子元素是div，这个div放的是下面菜单的客户商户帮助中心等二级菜单，可以用ul ，或者 dl 都可以，但是要注意的是父元素div的宽度和高度都要和a（将a设置块元素，大小参考“客户服务”四个字所占的那一小块的大小）标签的宽高相等，将二级菜单内容写完后，设置样式为display:none;可以通过css的 hover属性来设置显示这个二级菜单所在的块元素，当然也可以通过js的onmouseover事件来设置。

中间会存在两个问题，一个是压边线问题，另一个是文字下掉的问题。

说一下处理办法，第一个压边线，当你通过我上面说的方式完成代码，你会发现当鼠标移动到一级菜单“客户服务”上时，会出现这种情况这个时候就会用到“压边线”这个方法，简单方法就是设置父元素：hover>a{border属性，并且border-bottom：none；开启相对定位 position：relative；z-index：2（或者更大）height：原来的值+1px ；。}这个方法的原理就是通过改变a标签的高度，并且设置z-index最高级别，使a所在的块元素在下面二级菜单元素之上显示，这个问题就得到了完美解决。

第二个问题是文字下落，当你鼠标移动到一级菜单上时，会发现文字会往右下掉落2px，这是因为设置的a：hover 设置了一个border ，边框都在之前的基础上增加了1个像素的距离，此时，只有左上角时固定不变的，所有就会产生这种问题，解决办法时可以在之前的a标签上设置一个与a标签背景颜色一样的边框，这个时候，为了保持整体不变，高度和宽度、line-height 一些元素都要减去边框的距离。然后再重新CTRL+S，F5刷新，就得到如图完美的二级菜单：

部分样式写的不是太好，望海涵。

这是源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			 *{
			 	margin: 0;
			 	padding: 0;
			 	text-decoration: none;
			 }
			 /*设置a标签样式*/
			 .customer>a{
				display: block;	
				width: 98px;
				height: 29px;
				background-color: rgb(227 228 229);
				text-align: center;
				color: black;
				font-size: 13px;
				border: 1px solid rgb(227 228 229);
				border-bottom: none;
				line-height: 28px
			 }
			 /*父级元素的样式*/
			 .customer{
			 	width: 100px;
			 	height: 30px;
			 	margin: 100px auto;
			 	position: relative;
			 }
			 /*二级菜单的样式*/
			 .content{
			 	width: 200px;
			 	border: 1px solid rgb(227 228 229);
			 	display: none;
			 	position: absolute;
			 	right: 0;
			 	top: 29px;

			 }
			 /*列表属性*/
			 .content ul li{
			 	float: left;
			 	width: 85px;
			 	list-style: none;
			 	margin-left: 15px;
			 	line-height: 30px;
			 }
			 .content ul{
			 	padding-bottom: 10px; 
			 }
			 /*解决高度塌陷问题*/
			.clearfix:after{
			 	display: block;
			 	content: "";
			 	clear: both;
			 }
			 /*兼容问题*/
			 .clearfix{
			 	zoom: 1;
			 }
			 /*二级菜单的标题属性*/
			.content ul p{
			 	text-indent: 8px;
			 	font-size: 15px;
			 	font-weight: bold;
			 	margin-top: 10px;
			 }
			 /*给第一个ul设置bottom设置一个虚线*/
			.top{
			 	border-bottom: 1px dashed rgb(227 228 229); 
			 }
			/*设置显示二级菜单*/
			.customer:hover .content{
				display: block;
			}
			/*设置a：hover属性*/
			.customer:hover a {
				background-color: white;
				border: 1px solid  rgb(227 228 229) ;
				border-bottom: none; 
				position: relative;

				height: 30px;
				z-index: 10000000;	
				left: 1px;
			}
			.customer:hover>.content{
				background-color: white;

			}
		</style>
	</head>
	<body>
		<div class="customer">
		 	<a href="#">客户服务</a>	
		 	<div class="content  clearfix">
				<ul class="top clearfix">
					<p>客服</p>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
				</ul>
				<ul>
					<p>服务</p>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
					<li>帮助中心</li>
				</ul>
		 	</div>
		</div> 
	</body>
</html>

用css样式写的，有些写的不正确不规范的地方，还请大家多多评论。共同进步！

京东顶部二级菜单的写法举例

猜你喜欢