html - How to get rid of sub-menu underline -
i have problem isn't big or something,but annoys me hell.the problem underlining of child elements of sub-menu,and mean http://imgur.com/a/bqeza .yep,that right there drives me crazy.it shows instantly when hover on parent element,in menu.i started coding 2 weeks ago,so question might stupid,but please if know how remove , fix padding on parent element,to write here. here 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>
instead of applying bgcolor li
add a
remove code 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 ur css file
.mobile-menu li { 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; }
Comments
Post a Comment