CSS bottom border hover "jitter" - html

Question

I have a navigation bar which I would like to give an orange bottom border when you hover over the navigation buttons. Only problem is that whenever you hover, the border makes the content/navigation buttons "jitter" which they aren't supposed to. Also I already have a black bottom border on the navigation bar at all times so it wont work to change that.
HTML:
<div id="navBarTop">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</div>
CSS:
#navBarTop {
padding: 0;
background-image: url('navBarBackground1.png');
border-bottom: 1px solid #4c4c4c;
position: absolute;
bottom: 0;
text-align: center;
left: 0;
right: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#navBarTop li {
display: inline-block;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #ffffff;
}
#navBarTop li a:hover {
border-bottom: 2px solid #FF8000;
}

Answer 1

The jittering seems to be caused by adding the extra 2px border at the bottom when you hover. That causes the text to rise up a bit. To fix this, make sure there's always a 2px border by changing your #navBarTop li a to this:
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #00ffff;
border-bottom: 2px solid transparent; // <--- add this line
}
That should stabilize things for you.