第一篇文章,简单分享一下我最近在练习的京东顶部二级菜单
类似这种:
先说一下个人简单理解的布局,拿“客户服务”这个二级菜单来说,创建一个新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样式写的,有些写的不正确不规范的地方,还请大家多多评论。共同进步!