Umrete Kurvi Umrete Kurvi - 22 days ago 13
CSS Question

How to get rid of sub-menu underline

I have a problem which isn't really big or something,but it annoys me as hell.The problem is underlining of child elements of my sub-menu,and what i mean by that is http://imgur.com/a/BqEza .Yep,that right there drives me crazy.It shows instantly when i hover on my parent element,in my menu.I started to coding like 2 weeks ago,so my question might be stupid,but please if somebody know how to remove it and fix my padding on parent element,to write it here.
Here is the Code.



.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

instead of applying bgcolor to li add it to a

remove this code from ur css file

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

and add this to ur css file

.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;
}

enter image description here

Comments