關於懸停菜單列表項不一致

Question

我正在使用簡單的HTML和CSS來創建使用無序列表的水平菜單。

這是HTML & CSS代碼：

.nav_bar{ 
 
    margin-left: 700px; 
 
    margin-top: 40px; 
 
    position: absolute; 
 
} 
 

 
.nav_bar ul{ 
 
    list-style-type: none; 
 
} 
 

 
.nav_bar ul li{ 
 
    display: inline-block; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
.nav_bar ul li a{ 
 
    text-decoration: none; 
 
    padding: 12px; 
 
    margin: 8px; 
 
    font-size: 20px; 
 
    color: #fff; 
 
} 
 

 
.nav_bar ul li a::after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 4px; 
 
    background: #ff6600; 
 
    transition: width .4s; 
 
} 
 

 
.nav_bar ul li a:hover::after{ 
 
    width: 100%; 
 

 
}

<div class="nav_bar"> 
 
    <ul> 
 
    <li><a href="#">Services</a></li> 
 
    <li><a href="#">Solution</a></li> 
 
    <li><a href="#">Support</a></li> 
 
    <li><a href="#">Partners</a></li> 
 
    <li><a href="#">Contacts</a></li> 
 
    </ul> 
 
</div>

我不知道問題出在哪裏，以及爲什麼它正在發生？ 請幫我有很好的理由..

Answer 1

伊夫固定代碼和Ive得到了這樣的事情。

.nav_bar ul li a{ 
    text-decoration: none; 
    padding: 12px; 
    margin: 8px; 
    font-size: 20px; 
    color: orange; 
    position: relative; 
} 

.nav_bar ul li a::after{ 
     content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    height: 4px; 
    background: #ff6600; 
    transition: width .4s; 
    width: 0; 
} 

的問題是你的after元素顯示inline-block所以它內聯呈現與您的阿克爾標籤。並且由於您的achor標籤沒有足夠的寬度以內聯方式顯示::after，因此您的::after元素會纏繞在您的錨標記之後。 看到這一點：https://jsfiddle.net/pm68Lzmv/

Answer 2

試試這個：

添加position:absolute;到:after選擇一個標籤

從.nav_bar刪除margin-left並添加right:0

.nav_bar{   
 
    margin-top: 40px; 
 
    position: absolute; 
 
    right:0; 
 
} 
 

 
.nav_bar ul{ 
 
    list-style-type: none; 
 
} 
 

 
.nav_bar ul li{ 
 
    display: inline-block; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
.nav_bar ul li a{ 
 
    text-decoration: none; 
 
    padding: 12px; 
 
    margin: 0; 
 
    font-size: 20px; 
 
    color: #aaa; 
 
    display:block; 
 
    position:relative; 
 
} 
 

 
.nav_bar ul li a::after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 4px; 
 
    background: #ff6600; 
 
    transition: width .4s; 
 
    position:absolute; 
 
    left:50%; 
 
    bottom:0; 
 
    transform: translateX(-50%);  
 
} 
 

 
.nav_bar ul li a:hover::after{ 
 
    width: 100%; 
 

 
}

<div class="nav_bar"> 
 
    <ul> 
 
    <li><a href="#">Services</a></li> 
 
    <li><a href="#">Solution</a></li> 
 
    <li><a href="#">Support</a></li> 
 
    <li><a href="#">Partners</a></li> 
 
    <li><a href="#">Contacts</a></li> 
 
    </ul> 
 
</div>

Answer 3

刪除.nav_bar {margin-left：0px}

Add .nav_bar ul li a position：relative;

add .nav_bar ul li a：after position：absolute;

.nav_bar ul{ 
 
    list-style-type: none; 
 
} 
 

 
.nav_bar ul li{ 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.nav_bar ul li a{ 
 
    text-decoration: none; 
 
    padding: 12px; 
 
    margin: 0; 
 
    font-size: 20px; 
 
    color: #aaa; 
 
    display:block; 
 
    position:relative; 
 
} 
 

 
.nav_bar ul li a::after{ 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 0px; 
 
    height: 4px; 
 
    background: #ff6600; 
 
    transition: width .4s; 
 
    position:absolute; 
 
    left:50%; 
 
    bottom:0; 
 
    transform: translateX(-50%);  
 
} 
 

 
.nav_bar ul li a:hover::after{ 
 
    width: 100%; 
 

 
}

<div class="nav_bar"> 
 
      <ul> 
 
       <li><a href="#">Services</a></li> 
 
       <li><a href="#">Solution</a></li> 
 
       <li><a href="#">Support</a></li> 
 
       <li><a href="#">Partners</a></li> 
 
       <li><a href="#">Contacts</a></li> 
 
      </ul> 
 
     </div>