无法在菜单项上获得所需的悬停状态

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中删除垂直边距，然后将padding-top添加到list-element内的链接：

.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;
}