Chrome & Chromium have my pixel <ul> ONE to the left and ALL other browsers show it perfect

this might sound very picky, but I can't seem to get my menu to line up completely under Chrome while still keeping all other browsers alive.

If you look at techwalrus.com

using Chrome and hover over the Categories menu, you'll notice that the UL below it is 1 pixel to the left.

Here is a screenshot of the problem.

http://i.imgur.com/cWXO2ev.png

All other browsers render it correctly. What should I do?

.nav{
width:100%;
background-color: #0066B9;
font-family: verdana;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
}


.nav ul{
width:960px;
margin:0 auto;
list-style: none;
padding: 0px;
}
.nav li{
display: inline;
position: relative;
background-color: #003E64;
white-space: nowrap;
padding-top: 4px;
padding-bottom: 4px;
}
.nav ul li a{
color: white;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
}
.nav ul li a:hover{
background-color: green;
padding-left: 10px;
padding-right: 10px;
}
.nav ul li ul{
display: none;
position: absolute;
width: auto;
left: 0;
margin-top: 4px;
}
.nav ul li:hover ul{
display: block;
}
.nav ul li ul li{
display: block;
width: auto;
}

      

+3


source to share


1 answer


A quick solution that might work for you



@media screen and (-webkit-min-device-pixel-ratio:0)
{
.nav ul li ul { margin-left:1px; }
}

      

0


source







All Articles