Menuitem - CSS活動狀態不起作用

Question

我在努力使活動菜單元素正常工作。 問題是菜單元素在盤旋時看起來是正確的，但選中時，活動元素看起來不像是懸浮元素。 Th 我會很感激任何幫助。

#menuItems { 
 
    width: 980px; 
 
    height: 36px; 
 
    position: absolute; 
 
    bottom: 18px; 
 
    right: 20px; 
 
    top: 150px; 
 
    left: 310px; 
 
    font-size: 23px; 
 
    font-family: Enriqueta-Bold; 
 
    font-weight: bold; 
 
    align-content: center; 
 
    text-align: center; 
 
    background-color: #86ADED; 
 
    -webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); 
 
    -moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); 
 
    box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); 
 
} 
 
#menuItems ul { 
 
    margin: 0 auto; 
 
    align-items: center; 
 
    text-align: center; 
 
    position: relative; 
 
    right: 2%; 
 
} 
 
#menuItems li { 
 
    display: inline-block; 
 
    padding: 4px 15px; 
 
    align-content: center; 
 
    text-align: center; 
 
} 
 
#menuItems li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    color: black; 
 
} 
 
#menuItems li:hover { 
 
    height: 25px; 
 
    background-Color: #0099FF; 
 
    padding: 12px 15px 15px 15px; 
 
    margin-top: -20px; 
 
    cursor: pointer; 
 
} 
 
#menuItems li.active { 
 
    height: 25px; 
 
    background-Color: #0099FF; 
 
    padding: 12px 15px 15px 15px; 
 
    margin-top: -20px; 
 
    cursor: pointer; 
 
} 
 
#menuItems li:hover a { 
 
    color: white; 
 
    padding-bottom: -20px; 
 
} 
 
#menuItems li.active a { 
 
    color: white; 
 
    padding-bottom: -20px; 
 
}

<div id="menuItems"> 
 
    <ul> 
 
    <li>@Html.ActionLink("About", "About", "Home")</li> 
 
    <li>@Html.ActionLink("Interests", "Interests", "Home")</li> 
 
    <li>@Html.ActionLink("Price List", "PriceList", "Home")</li> 
 
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
 
    </ul> 
 
</div>

Answer 1

你必須使用而不是句冒號。 ：active，not .active

另外 - 活動狀態樣式與懸停狀態樣式相同。