如何摆脱子菜单下划线

Question

我有一个问题，这个问题不是很大或什么的，但它让我很生气。问题是我的子菜单中的子元素的下划线，我的意思是http://imgur.com/a/BqEza。是的那就在那里让我发疯了。当我悬停在我的父元素上，在我的菜单中时它立即显示。我开始编码就像2周前一样，所以我的问题可能是愚蠢的，但如果有人知道如何删除并修复，请我在父元素上的填充，在这里写。 这是守则。

.mobile-menu{
position:fixed;
width:70%;
height:100%;
background:white;
z-index:1000;
}
.mobile-menu ul{
top:10.2%;
position:relative;
color:black;
text-align:left;
font-weight:bold;
}
.mobile-menu li{
position:relative;
border-bottom:1px solid black;
padding-top:4%;
padding-bottom:4%;
}
.mobile-menu li:hover{
background:#000;
color:#fff;
}
.mobile-menu ul li ul{
display:none;
background:#fff;
padding:0;
border:none;
}
.mobile-menu ul li:hover ul{
display:block;
}

     <div class="mobile-menu">
         <ul class="mobile-menu-ul">
           </ul>
      </div>

Answer 1

而不是将bgcolor应用于li，而不是将其添加到a

从ur css文件中删除此代码

.mobile-menu li:hover {
    background: #000;
    color: #fff;
}
.mobile-menu li {
    position: relative;
    border-bottom: 1px solid black;
    padding-top: 4%;
    padding-bottom: 4%;
}

并将其添加到ur css文件

.mobile-menu li a {
    display: block;
    padding: 4% 0;
}
.mobile-menu > ul> li:hover > a, .mobile-menu > ul> li:hover > .sub-menu > li:hover > a, .mobile-menu > ul .sub-menu  .sub-menu > li:hover > a{
    background-color: #111;
    color: #fff;
}