Question

I Have a <li> menu items with 2px border bottom as underline and a bold hover which makes other elements move while hovering. I tried to change the padding on the hover but without a result. (I think the problem is the added underline of border bottom)

#menu { 
     list-style: none outside none;
     margin-top:40px; 
     text-align: center}

#menu li { 
     margin-right: 26px;
     display:inline;}

#menu a:hover {
     border-bottom:2px solid #ac9962;
     font-size:16px;
     letter-spacing: -2px;
     white-space: nowrap;
     font-weight:bold;}

<ul id="menu">
        <li><a href="www.youtube.com">Menu1</a></li>
        <li><a href="www.youtube.com">Menu2</a></li>
        <li><a href="www.youtube.com">Menu3</a></li>
        <li><a href="www.youtube.com">Menu4</a></li>
      </ul>

http://jsfiddle.net/tGcfh/

Answer 1

Try something similar:

HTML

<div id="menu_container">
  <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
  </ul>
</div>

CSS

#menu_container {
  width: 100%;
  display: table;
}

#menu_container ul li {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 50px;
}

#menu_container ul li a {
  font-size: 14px;
}

#menu_container ul li a:hover {
  font-size: 24px;
}

This will work perfectly as expected, but have in mind that display:table is not supported in IE7 and bellow.