1

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

4

3 回答 3

2

这是另一种解决方案，您可以添加空格/nbsp；在 A 标记之后，它将修复斜体悬停错误：

  1. html方法：

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

  2. 方法：

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

于 2013-07-20T20:28:51.263 回答
2

这是因为你font-style:italic需要额外的空间。

您可以添加一些固定width到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。

于 2013-03-27T09:46:28.887 回答
0 
#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;

}

于 2013-03-27T09:57:03.837 回答