overlap off by 1px in Firefox and IE but not in Chrome - css

Question

In Chrome the ul li ul border is exact over de border of the menu ul, but in Internet Explorer and Firefox it's off by 1px.
http://jsfiddle.net/5qasu929/
#menu ul li ul {
display:none;
position:absolute;
z-index:999;
height:auto;
margin-top:16px;
margin-left:-0px;
background-color:#EFEFEF;
border-bottom:1px solid #C7C7C7;
border-left:1px solid #C7C7C7;
border-right:1px solid #C7C7C7;
}
#menu ul li {
display:table-cell;
height:50px;
vertical-align:middle;
border-bottom:1px solid #C7C7C7;
margin-left:0;
}
How can I fix this?

Answer 1

A couple of changes should make this more uniform across browsers:
Add position:relative; to #menu ul li to make the child ul position relative to it
Add top:50px; to #menu ul li ul. This is the same as the height of the parent li
Remove margin-top:16px; from #menu ul li ul
#menu {
width: 950px;
margin: 0px auto;
list-style: none;
position: relative;
}
#menu ul {
list-style: none;
float: left;
}
#menu ul li {
display: table-cell;
height: 50px;
vertical-align: middle;
border-bottom: 1px solid #C7C7C7;
margin-left: 0;
position: relative; /*Add*/
}
#menu ul li a {
font-size: 18px;
color: #024fff;
text-decoration: none;
font-family: 'Raleway', sans-serif;
padding: 5px;
}
#menu ul li:hover {
background-color: #E3E3E3;
border-bottom: 1px solid #024fff;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
#menu ul li ul {
display: none;
position: absolute;
z-index: 999;
height: auto;
/*margin-top:16px;Remove*/
margin-left: -0px;
background-color: #EFEFEF;
border-bottom: 1px solid #C7C7C7;
border-left: 1px solid #C7C7C7;
border-right: 1px solid #C7C7C7;
top: 50px;/*Add*/
}
#menu ul li:hover > ul {
display: block;
border-top: 1px solid #024fff;
}
#menu ul li ul li {
min-width: 80px;
display: block;
height: 23px;
padding: 9px 35px 0px 5px;
border: 0px;
}
#menu ul li ul li:hover {
border-bottom: 0px;
}
#menu ul li ul li:before {
content: '- \00a0 ';
color: #024fff;
}
#menu ul li ul li a {
font-size: 16px;
padding: 3px;
}
<div id="menu">
<ul>
<li>Home
<ul>
<li>Sub1
</li>
<li>Sub1
</li>
<li>Sub1
</li>
</ul>
</li>
<li>Home2
<ul>
<li>Sub1
</li>
<li>Sub1
</li>
<li>Sub1
</li>
</ul>
</li>
<li>Home3
</li>
<li>Home4
<ul>
<li>Sub1
</li>
<li>Sub1
</li>
<li>Sub1
</li>
</ul>
</li>
</ul>
</div>

Answer 2

Use border-box property of css,
Specify that <li> elements should have padding and border included in
the element's total width and height:
#menu ul li {
box-sizing:border-box;
margin-top:-1px;
}

Answer 3

You should use the A tag height within a parent LI in order to position your sub menu
First, add a display:block and height:100% to your A:
#menu ul li a {
font-size:18px;
color:#024fff;
text-decoration:none;
font-family: 'Raleway', sans-serif;
padding:5px;
display:block;
height:100%;
}
Delete Li's height (Height will depend on the font-size & padding of your A tag
#menu ul li {
display:table-cell;
height:auto;
vertical-align:middle;
border-bottom:1px solid #C7C7C7;
margin-left:0;
}
And finally remove margin-top toi submenu :
#menu ul li ul {
display:none;
position:absolute;
z-index:999;
height:auto;
/*margin-top:16px;*/
margin-left:-0px;
background-color:#EFEFEF;
border-bottom:1px solid #C7C7C7;
border-left:1px solid #C7C7C7;
border-right:1px solid #C7C7C7;
}
Prevent submenu > a from being display:block:
#menu ul li ul li a {
font-size:16px;
padding:3px;
display:inline;
}
Live example