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