web小白问题:这个鼠标放上去的下拉栏黑边如何去除?

用户下面有个黑边,求给个解决思路

测试了一下,自行按照截图里的修改试试,不懂再继续追问。

 

 

你这是啥 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;}