用户下面有个黑边,求给个解决思路
测试了一下,自行按照截图里的修改试试,不懂再继续追问。
你这是啥 button 还是 a 还是啥的 基本用css伪类就可以
请贴上代码以及css,或者贴上链接,如不方便,可私信你站的链接我帮你看看
html:
<div class="userinfo">
<div class="user">
<a id="user-box-tit" href="">用户↓</a>
<ul id="user-ul">
<li>
<a href="">个人中心</a>
</li>
<li>
<a href="">评价晒单</a>
</li>
<li>
<a href="">我的喜欢</a>
</li>
<li>
<a href="">小米账号</a>
</li>
<li>
<a href="">退出登录</a>
</li>
</ul>
</div>
<a href="">消息通知</a>
<span>|</span>
<a href="">我的订单</a>
</div>
css:
.userinfo {
float: right;
color: #A2A2A2;
padding: 0 3px;
margin-right: 20px;
}
.user {
width: 120px;
background-color: red;
display: inline-block;
position: relative;
}
#user-ul {
display: none;
position: absolute;
left: 0px;
margin-left: 0px;
width: 120px;
top: 35px;
padding-bottom: 10px;
padding-top: 5px;
box-shadow:#AAAAAA 0px 1px 5px ;
border-top-color: #FFFFFF;
}
#user-ul li {
line-height: 30px;
text-align: center;
padding: 0 ;
}
#user-ul a{
display: block;
}
#user-ul li:hover{
background-color: #f5f5f5;
color: #ff6700;
}
#user-box-tit{
line-height: 35px;
text-align: center;
display: block;
color: #A2A2A2;
background-color: #323232;
position: relative;
z-index: 5;
}
.user:hover #user-ul{
display: block;
}
.user:hover #user-box-tit{
background-color: #f5f5f5;
color: #000000;
}
.userinfo a:hover{
color: #FFFFFF;
}
你可以将下拉菜单样式设置z-index: 100,top:32px,适当的调整,我在本地运行了你的代码没出现,我加了下面代码,清除浏览器默认样式。
* { padding: 0; margin: 0; }
ul, li { list-style: none;}