<!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>
簡單導航欄hover時候下拉菜單 邊框覆蓋border
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章