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
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>