Question

悬停时菜单是跳跃的......当我悬停某些东西时，我该怎么办才能让其他元素留在一个地方？

在悬停时，它设置为粗体，将所有内容移动到两侧......

.navlinks ul {
   margin-top: 45px;
   padding: 0;
 }
 .navlinks ul li {
   display: inline-block;
 }
 .navlinks ul li a {
   color: black;
   font-weight: 300;
   font-size: 1.5em;
   text-decoration: none;
   border-bottom: 1px dashed white;
 }
 .navlinks ul li a:hover {
   font-weight: 700;
   border-bottom: none;
 }
 .navlinks ul > li:not(:first-child) {
   margin-left: 30px;
 }

<div class="navlinks">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About us</a>
    </li>
    <li><a href="#">Product</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
  </ul>
</div>

Answer 1

您可以将<li>上的宽度设置为静态宽度，或使用display：table设置菜单。

这两个例子都在这里： http://jsfiddle.net/e8rw1tq6/

Answer 2

您可以使用text-shadow来模仿粗体字体。这不会影响布局。

＆＃13;

.navlinks ul {
  margin-top: 45px;
  padding: 0;
}
.navlinks ul li {
  display: inline-block;
}
.navlinks ul li a {
  color: black;
  font-weight: 300;
  font-size: 1.5em;
  text-decoration: none;
  border-bottom: 1px dashed white;
}
.navlinks ul li a:hover {
  text-shadow: 0 1px black, 1px 0 black, 1px 1px black;
  border-bottom: none;
}
.navlinks ul > li:not(:first-child) {
  margin-left: 30px;
}

＆＃13;

<div class="navlinks">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About us</a>
    </li>
    <li><a href="#">Product</a>
    </li>
    <li><a href="#">FAQ</a>
    </li>
  </ul>
</div>

＆＃13;

悬停时菜单跳跃

2 个答案: