jquery animate padding on menu with position "fixed"

Question

I'm using a jquery code to animate my menu. my menu uses vertical li. when mouseover the li, a padding of 20 px is added, and when mouseout the padding is set to its original value. it works fine.

but I have a problem, when I set my menu to position "fixed", there's a bug in my animation, when mouseover l)i (for example with "infos pratiques", my menu tremble. The problem is only when my menu is set to fixed and absolute.

anyone can help me with this ?

here a jsfiddle link to see it in action :

http://jsfiddle.net/F5643/2/

here is my html :

<div id="menu_left">
    <nav id="menu_1">
          <ul>
            <li><a href="#">• Le lieu</a></li>
            <li><a href="#">• Le Projet</a></li>
            <li><a href="#">• Evenements</a></li>
            <li><a href="#">• Residents</a></li>
            <li><a href="#">• Ateliers</a></li>
            <li><a href="#">• Infos Pratiques</a></li>
        </ul>

    </nav>

    <nav id="menu_2">
          <ul>
            <li><a href="#">• Bar | Restaurant</a></li>
            <li><a href="#">• Privatiser le Lieu</a></li>
            <li><a href="#">• Soutenir le Projet</a></li>
            <li><a href="#">• Covoiturage</a></li>
        </ul>

    </nav>
    </div>

my CSS :

#menu_left {
    opacity: 0.5;
    font-family: 't-star_mono_roundregular';
    color: #FFF;
    text-decoration: none;
    position: fixed;
    background-color:red;
}

#menu_1{margin-top: 10%}

#menu_1 li {margin-bottom: 5px;display:block}
#menu_1 li a{
  background-color:rgba(0, 0, 0, 1);
  padding:4px 50px 0px 10px;
  text-decoration:none;
  color:white;
  font-size:20px;
}

#menu_1 li a:hover{
  background-color:rgba(0, 248, 0, 1); 
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
color:black;
-webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    -o-transition: color 100ms linear;
    -ms-transition: color 100ms linear;
    transition: color 100ms linear;}

#menu_2{margin-top: 40px}
#menu_2 li {margin-bottom: 5px;display:block}
#menu_2 li a{
  background-color:rgba(0, 0, 0, 1);
  padding:4px 50px 0px 10px;
  text-decoration:none;
  color:white;
  font-size:15px;
}
#menu_2 li a:hover{background-color:rgba(0, 248, 0, 1); 
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
color:black;
-webkit-transition: color 100ms linear;
    -moz-transition: color 100ms linear;
    -o-transition: color 100ms linear;
    -ms-transition: color 100ms linear;
    transition: color 100ms linear;}

and my JS :

function MIn()
{
    jQuery(this).animate({paddingLeft:"20px"},"fast");
}
function MOut()
{
    jQuery(this).animate({paddingLeft:"10px"},"fast");
}   

$('li a').hover(MIn, MOut);

thanks a lot for your help,

Answer 1

#menu_1 has a margin-top of 10%. When set as a percentage, margins are based on the containing elements width. So when 20px is added to the width of the li, it changes the width of #menu_1 which then changes the size of the padding. If you changed it to the following it will work as intended:

#menu_1 {
    margin-top: 22px;
}

You could fix this with a fixed width to, but that means if you get a longer menu name you'll have to change it again. I have updated the fiddle to make a few changes. You dont need the javascript and if you put the transitions in the default state [ie not the :hover bit] of the element then the transition will transition back to its original state after being hovered.

http://jsfiddle.net/F5643/12/