在菜單項上遇到麻煩的懸停狀態

Question

我想讓我的菜單項懸停狀態如下圖所示，但到目前爲止我還沒有任何運氣。我在下面發佈了一個屏幕截圖，裏面顯示了它當前的樣子，以及我需要它的樣子。我試圖增加<li>和<a>元素的大小，但它不起作用。任何幫助將不勝感激！

目前：

它所需要的樣子：

​​

HTML：

<div class="col2"> 
    <div class="mainnav"> 
    <ul id="menu-global" class="menu"> 
     <li class="menu-item current-menu-item"> 
     <a href="www.google.com">Home</a> 
     </li> 
     <li class="menu-item"> 
     <a href="www.google.com">Get Involved</a> 
     </li> 
     <li class="menu-item"> 
     <a href="www.google.com">Resources</a> 
     </li> 
     <li class="menu-item"> 
     <a href="www.google.com">Contact</a> 
     </li> 
    </ul> 
    </div> 
</div> 

CSS：

.header .col2 { 
    width: auto; 
    float: right; 
    text-align: center; 
    margin: 50px auto; 
    font-size: 115%; 
    padding-right: 65px; 
} 

.header ul { 
    list-style-type: none; 
    display: inline-block; 
    margin: 0 auto; 
    padding: 0; 
    line-height: 43px; 
} 
.header ul li { 
    list-style-type: none; 
    margin: 0px; 
    margin-right: 7px; 
    float: left; 
} 

.header .col2 ul li a { 
    color: #30302E; 
    display: block; 
    text-transform: uppercase; 
    padding-right: 5px; 
    padding-left: 5px; 
    text-align: center; 
    font-family: 'Merriweather', Verdana; 
} 

.header .col2 ul li a:hover { 
    background-color: #ECF0F1; 
    box-shadow: 0px 5px 7px 0px rgba(50, 50, 50, 0.45); 
} 

Answer 1

你必須從COL2刪除垂直邊距，而是添加填充頂到列表元素中的鏈接：

.header .col2 { 
    width: auto; 
    float: right; 
    text-align: center; 
    margin: 0px auto; 
    font-size: 115%; 
    padding-right: 65px; 
} 

.header .col2 ul li a { 
    color: #30302E; 
    display: block; 
    text-transform: uppercase; 
    padding-right: 5px; 
    padding-top:50px; 
    padding-left: 5px; 
    text-align: center; 
    font-family: 'Merriweather', Verdana; 
}