title: CSS Hover Issue (Padding)
body: <p>Trying to have padding around the menu items and when they hover over it changes background colour. However, at the moment padding is only effecting the side of the elements and not the top or bottom.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" type"text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="header"&gt;
              &lt;ul id="menu"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      margin:auto;
      border:1px solid black;
      width:960px;
      height:700px;
  }
  
  #header {
      width:960px;
      height:150px;
      border: 1px solid blue;
  }
  
  #menu {
      width:800px;
      list-style:none;
  }
  
  #menu li {
      float:left;
      margin-left:20px;
      border:1px solid black;
  }
  
  #menu a:hover {
      background:blue;
      padding:20px;
  }
  
  #menu a {
      padding:20px;
      height:20px;
      text-decoration:none;
  }
  </code></pre>