MrDevRI
MrDevRI

Reputation: 243

Trouble getting desired hover state on menu items

I am trying to get my menu item hover state to be like it is in the screenshot below, but so far I haven't had any luck. I posted a screenshot below of what it currently looks like, and what I need it to look like. I tried increasing the size of the <li> and <a> elements but it didn't work. Any help would be greatly appreciated!

Currently:

enter image description here

What it needs to look like:

enter image description here

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

Upvotes: 1

Views: 25

Answers (1)

Philip Feldmann
Philip Feldmann

Reputation: 8375

You have to remove the vertical margin from the col2 and add a padding-top instead to the link inside the 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;
}

Upvotes: 2

Related Questions