HTML/CSS when hover link with style italic other links stay stable

Question

I have a little problem when i hover menu link other links shift to sideways, but i need that my other links would stay stable. How can i fix that?

HTML:

<div id="top">
    <a href="index.php?id=pagrindinis"><div id="logo"></div></a>
    <div id="menu">
        <ul id="nav">
            <li><a href="index.php">Pagrindinis</a></li>
            <li><a href="#">Taisyklės</a></li>
            <li><a href="#">Pamokos</a></li>
            <li><a href="#">Kontaktai</a></li>
            <li><a href="#">Facebook</a></li>
        </ul>
    </div>

CSS:

#menu #nav {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    list-style:none;
}

#menu #nav li {
    display: inline-block;
    padding: 0px 10px 0px 10px;
}

#menu #nav li a {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    text-decoration: none;
}

#menu #nav li a:hover {
    color: #0a813c;
    font-style: italic;
}

JSFIDDLE: http://jsfiddle.net/nJgyn/1/

Thanks for help

Answer 1

It's because your font-style:italic takes extra space.

You can add some fixed width to the li.

#menu #nav {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  list-style: none;
}

#menu #nav li {
  display: inline-block;
  padding: 0px 10px 0px 10px;
  width: 50px;
}

#menu #nav li a {
  font-family: Segoe UI, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  text-decoration: none;
}

#menu #nav li a:hover {
  color: #0a813c;
  font-style: italic;
}

<div id="menu">
  <ul id="nav">
    <li><a href="index.php">Pagrindinis</a></li>
    <li><a href="#">Taisyklės</a></li>
    <li><a href="#">Pamokos</a></li>
    <li><a href="#">Kontaktai</a></li>
    <li><a href="#">Facebook</a></li>
  </ul>
</div>

JSfiddle.

Answer 2

Here is another solution, you can add space/nbsp; after A tag, it will fix the italic hover bug:

1. Html Method:

   <a href="#">Link&nbsp;</a>

2. Css method:

   #menu #nav li a:after { content: "\0000a0"; }

Answer 3

#menu #nav li {
display: inline-block;
width: 100px;
text-align: center;
}

#menu #nav {
font-family: Segoe UI, Arial, sans-serif;
font-size: 14px;
color: white;
list-style: none;
padding: 0px;
display: table;

}