title: Make entire Menu Item Clickable
body: <p>I seem to be having a problem with my CSS in making the entire menu item clickable, not just the text.
  As you can see from the highlighted screenshot, the menu does not extend to 100% height of the div. As a result, only the text of the menu is clickable, not the whole box around it. How do I make the entire box clickable?
  (Code Below)
  <img src="https://i.stack.imgur.com/g0fL3.png" alt="picture outlining problem"></p>
  
  <pre><code>#header
  {
      background-color: black;
  
  
  }
  #header .menu
  {
  display: inline;
  text-decoration: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%
  position: relative;
  text-transform:uppercase;
  
  
  
  }
  
  
  #header .menu ul{
  display: inline-block;
  
  }
  #header .menu li {
  display: inline-block;
  padding: 20px;
  width: auto;
  color: white;
  height: 100%;
  position: relative;
  
  }
  #header .menu a{
  display: block;
  width: 100%
  height: 100%;
  text-decoration: none;
  color: white;
  font-family: Helvetica;
  
  }
  #header .menu ul li a{
  display: block;
  }
  #header .menu li a{
  position: relative;
  }
  </code></pre>
  
  <p>Thanks.</p>