菜单在悬停时跳动

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>设置宽度为静态的，或者使用显示：表格来设计菜单。

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

Answer 2

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

.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; 
 
}

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