html列表hover,css - HTML button list hover bug - Stack Overflow

So I'm designing this simple website and it seemed to work well until now. I had been using Safari to test it, but I can't get it to look right on any other browsers, namely Firefox 3.5-ish. The problem is in an used for a button row. In other browsers the buttons are pushed to the right, as if there were padding or margins on the, but I specified a padding of 0. In Chrome, the buttons go to the correct spot after hovering over the original spot but reset to correct position again if the page is updated via opening the inspector. In Firefox and IE9 they shift to the right but don't move back at all. Is there a way to fix this? Here is the code that is relavent:

HTML

CSS

#menu ul {

margin:0;

padding:0;

}

#menu {

height: 164px;

text-align: center;

position:absolute;

bottom:-120px;

width:650px;

}

#menu li {

height:30px;

width:120px;

display: inline-block;

text-align: center;

line-height:30px;

margin: 30px 5px;

position: relative;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

}

#menu li:hover {

margin: 30px 10px;

}

#menu li:active {

margin: 30px 10px;

}

#menu a:link {

text-decoration:none;

color:black;

}

#menu a {

text-decoration:none;

text-transform:uppercase;

color:black;

}

#menu a:active {

text-decoration:none;

color:black;

}

#menu a:hover {

text-decoration:none;

color:black;

}