简单导航栏hover时候下拉菜单边框覆盖border

最新推荐文章于 2022-03-06 17:35:39 发布

荷兰豆叶子上的水熊

最新推荐文章于 2022-03-06 17:35:39 发布

阅读量939

点赞数

分类专栏：样式文章标签： htm5 导航栏 hover下拉

本文链接：https://blog.csdn.net/u010200033/article/details/79806787

版权

样式专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;}
.nav{
height: 28px;background-color: #58bc58;
}
.nav li{
float:left;list-style: none;margin:0 12px;font-size: 12px;
}
.small{
margin:0 6px!important;
}
.small .help,.small .kefu{
padding:3px 20px 0 20px;border:1px solid transparent;
}
.helpBox{margin-right: -7px;position:relative;}
.helpBox:hover .help{border:1px solid red;border-bottom: 0 none;}
.helpBox:hover .kefu{border:1px solid red;border-top: 0 none;display:block;}
.small .help{
margin-top: 3px;display:block;
}
.small .kefu{
position:absolute;top:20px;right: 0;display:none;
}

.river{
width: 1px;height: 15px;margin-top: 6px;background-color:#000;margin:6px 0 0 0!important;
}
</style>
</head>
<body>
<ul class="nav">
<li>笑嘻嘻</li>
<li class="river"></li>
<li class="small">
<div class="helpBox">
<span class='help'>帮助中心</span>
<div class='kefu'>联系客服</div>
</div>
</li>
<li class="river"></li>
</ul>
</body>
</html>