css - How do I make a dropdown in Firefox look the same as Chrome/IE? -
so, i'm building website dropdown menu. in chrome
looks nice, on firefox
takes no padding , find way make them same on both browsers.
i'm aware known issue, didn't find decent fix problem.
here's drawing dropdown
code on debug
<div class="collapse navbar-collapse" id="mainmenu_nav"> <ul class="navbar-nav nav h> <li aria-haspopup="true" class="hasitems hover focus"> <div class="wrapper" tabindex="-1"> .... </div> </li> </ul> </div>
css
.navbar-collapse{ max-height:none; margin-left:-10px; margin-right:-10px; } .h{ position:relative; back-ground-color:black; margin-left:5px; white-space:nowrap; width:100%; display:table; } .h>li.hover{ background-color:white; top:3px } .h>li{ position:relative; white-space:nowrap; display:table-cell; float:none; vertical-align:middle }
what's trick apply here?
funny thing, guessed problem might not had anythingto dropdown, fact firefox somehow ignored padding. seems wrong, since according this answer, bug of chrome , not firefox
i've fixed problem displaying li
block
@-moz-document url-prefix(){ .h >li.hover{ height:45px; display:block; top:3px; } }
Comments
Post a Comment