CSS Navbar dropdown menu text moves to the left when mousing over

Question

I did a dropdown navbar on my blog, and every time I mouse over the text it jiggles to the left in the most annoying fashion. You can see it in action HERE.

I've tried using "position: relative;" and "position: absolute;" but these either screw up my navbar big time or don't do anything at all, depending on where I place them. Here's the CSS I used to make my navbar:

.Header h1
{
    text-shadow:2px 2px #FFFFFF;
}

/*----- MBT Drop Down Menu ----*/
#mbtnavbar
{
/* background: #8dfcf4; */
    width:100%;
    color:#8dfcf4;
    margin:0;
    padding:0;
    position:relative;
    border-top:0 solid #960100;
    height:41px;
}

#mbtnav
{
    background:#8dfcf4;
    margin:0;
    padding:0;
}

#mbtnav ul
{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
}

#mbtnav li
{
    list-style:none;
    margin:0;
    padding:0;
/* border-left:1px solid #333; 
    border-right:1px solid #333; */
    height:41px;
}

#mbtnav li a,#mbtnav li a:link,#mbtnav li a:visited
{
    color:#0000;
    display:block;
    font:17px Milonga;
    margin:0;
    position:relative;
    padding:9px 23px 10px 12px;
    text-decoration:none;
}

#mbtnav li a:hover,#mbtnav li a:active
{
    background:#03a29b;
    color:#FFF;
    display:block;
    text-decoration:none;
    margin:0;
    position:relative;
    padding:9px 12px 10px;
}

#mbtnav li
{
    float:left;
    position:relative;
    padding:0;
}

#mbtnav li ul
{
    z-index:9999;
    position:absolute;
    left:-999em;
    height:auto;
    width:152px;
    margin:0;
    padding:0;
}

#mbtnav li ul a
{
    width:152px;
}

#mbtnav li ul ul
{
    margin:-35px 0 0 161px;
}

#mbtnav li:hover ul ul,#mbtnav li:hover ul ul ul,#mbtnav li.sfhover ul ul,#mbtnav li.sfhover ul ul ul
{
    left:-999em;
}

#mbtnav li:hover ul,#mbtnav li li:hover ul,#mbtnav li li li:hover ul,#mbtnav li.sfhover ul,#mbtnav li li.sfhover ul,#mbtnav li li li.sfhover ul
{
    left:auto;
}

#mbtnav li:hover,#mbtnav li.sfhover
{
    position:static;
}

#mbtnav li li a,#mbtnav li li a:link,#mbtnav li li a:visited
{
    background:#8dfcf4;
/* width: 140px; */
    color:#0000;
    display:block;
    font:15px Milonga;
    margin:0;
    padding:9px 12px 10px;
    text-decoration:none;
    z-index:9999;
    border-bottom:none;
}

#mbtnav li li a:hover,#mbtnavli li a:active
{
    background:#03a29b;
    color:#FFF;
    display:block;
    margin:0;
    padding:9px 12px 10px;
    text-decoration:none;
}

.tabs-inner .widget #mbtnavbar li a
{
    border-left:none;
}

.tabs-outer .widget,.section
{
    margin:0;
}

.tabs-inner
{
    padding:0;
}

The above is a modified code of the original one HERE.

I'd appreciate all the help I can get.

Answer 1

Change your :hover code on line number (616) as below:

#mbtnav li a:hover, #mbtnav li a:active { 
background: #03a29b; 
color: #FFF; 
display: block; 
text-decoration: none; 
margin: 0; 
position: relative; 
}

It was moving left because you were changing padding from 9px 23px 10px 12px to 9px 12px 10px 12px

Answer 2

The issue is with the reduction of padding of the anchor tags on hover.

#mbtnav li a:hover, #mbtnav li a:active { 
background: #03a29b; 
color: #FFF; 
display: block; 
text-decoration: none; 
margin: 0; 
position: relative; 
/* padding: 9px 12px 10px 12px;  */
} 

Answer 3

Your CSS for the Hover currently is:

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    display: block;
    font: 17px Milonga;
    margin: 0;
    padding: 9px 23px 10px 12px;
    position: relative;
    text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: none repeat scroll 0 0 #03A29B;
    color: #FFFFFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px;   <------- YOU CHANGED PADDING HERE
    position: relative;
    text-decoration: none;
}

But should be:

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    display: block;
    font: 17px Milonga;
    margin: 0;
    padding: 9px 23px 10px 12px;
    position: relative;
    text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: none repeat scroll 0 0 #03A29B;
    color: #FFFFFF;
    display: block;
    margin: 0;
    padding: 9px 23px 10px 12px;
    position: relative;
    text-decoration: none;
}