Anchor background color change

Question

So I have a nav bar that I will later have drop down from above the screen. I want the entire list item to change from the blue into a gray. I managed to get the width correct by setting the display to block. But the height is giving me issues. height:100% isnt working. Setting top and bottom padding to the same as the list item only works when the display isnt block. not it just makes the buttons larger.

<style>
ul {
    list-style:none;
    font-family:sans-serif;
    font-weight:300;
    margin:0;
    padding:0;
    box-shadow: 0px 6px 15px #888888;
    font-family:impact;
    font-size:25px;
}
.nav li {
    text-transform:uppercase;
    text-align:center;
    display:inline-block;
    background-color:#3A97FF;
    width:25%;
    margin:0;
    padding:40px 0;
    color:#fff;
}
nav li:nth-child(even) {
    background-color:#1A77FF;
}

a {
    display:block;
    text-decoration:none;
    color:#fff;
    overflow:auto;
}
a:hover {
    background:#292A29;
}
</style>
<nav>
  <ul class="nav">
    <li><a href="../Portfolio/About.html">About</a></li
    ><li><a href="../Portfolio/Contact.html">Contact</a></li
    ><li><a href="../Portfolio/Support.html">Support</a></li
    ><li><a href="../Portfolio/Work.html">Work</a></li>
  </ul>
</nav>

Answer 1

Remove the padding from li emlements and add it to the a elements instead, also inline-block add gaps between the inlined elements, use display: block; float: left instead. See the following snippet for more details:

ul {
  list-style: none;
  font-family: sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0;
  box-shadow: 0px 6px 15px #888888;
  font-family: impact;
  font-size: 25px;
}

.nav li {
  text-transform: uppercase;
  text-align: center;
  display: block;
  float: left;
  background-color: #3A97FF;
  width: 25%;
  margin: 0;
  padding: 0;
  color: #fff;
}

nav li:nth-child(even) {
  background-color: #1A77FF;
}

a {
  display: block;
  text-decoration: none;
  color: #fff;
  overflow: auto;
  padding: 40px 0;
}

a:hover {
  background: #292A29;
}

<nav>
  <ul class="nav">
    <li><a href="../Portfolio/About.html">About</a>
    </li>
    <li><a href="../Portfolio/Contact.html">Contact</a>
    </li>
    <li><a href="../Portfolio/Support.html">Support</a>
    </li>
    <li><a href="../Portfolio/Work.html">Work</a>
    </li>
  </ul>
</nav>