菜單在懸停時跳動

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>