我正在嘗試為我的導航欄鏈接制作懸停效果，其中當它們懸停時，邊框底線會以動畫方式進入。我嘗試使用此：li:hover a {box-sizing: border-box;width: 100%;border: solid #F5F5F5 5px;padding: 5px;border-top: 0px;border-left: 0px;border-right: 0px;}這部分有效，懸停時會出現底線（顯然沒有動畫，因為我還沒有執行該部分）。問題是，當它們懸停時，不僅會出現底部邊框，而且所有選項也會移動，就像邊框底部導致整個導航欄向相反方向稍微移動每個鏈接一樣，就像它們試圖彼此保持距離。我該如何解決這個問題？我將保留導航欄的 HTML 代碼和一些 css 代碼：HTML：    <ul class="nav-links">    <li><a href="">HOME</a></a></li>    <li><a href="">PORTFOLIO</a></a></li>    <li><a href="">SUBMIT</a></a></li>    <li><a href="">CONTACT</a></a></li>    <li><a href="">ABOUT</a></a></li>    </ul>CSS：* {margin: 0px;padding: 0px;box-sizing: border-box;}body {background-color: #900c3f;}img {width: 130px;margin-top: 20px;margin-left: 20px;margin-bottom: 20px;}nav {display: flex;justify-content: space-around;align-items: center;min-height: 8vh;background-color: #ff5733;}li:hover a {box-sizing: border-box;width: 100%;border: solid #F5F5F5 5px;padding: 5px;border-top: 0px;border-left: 0px;border-right: 0px;}.nav-links {display: flex;justify-content: space-around;width: 80%;}.nav-links li {list-style: none;}.nav-links a {text-decoration: none;font-family: Poppins;color: #F5F5F5;letter-spacing: 3px;font-weight: bold;font-size: 130%;}是否有任何 div 應該添加到導航欄？或者我所做的一切毫無意義？我仍在學習，所以我可能會搞砸。這是一個屏幕截圖，以防萬一：懸停導航欄的屏幕截圖感謝社區！