title: HTML CSS UL menu styling
body: <p>Small question on how to achieve some styling on a HTML / CSS UL menu.</p>
  
  <p>I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:</p>
  
  <p><a href="http://jsfiddle.net/WMQqt/" rel="nofollow">http://jsfiddle.net/WMQqt/</a></p>
  
  <p>(HTML)</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>(CSS)</p>
  
  <pre><code>#nav {
      list-style: none;
      margin-bottom: 10px;
      */ margin-top: -6px;
      position: relative;
      right: 286px;
      z-index: 9;
      height: 26px;
      padding: 4px 4px 4px 4px;
      font-weight: bold;
  }
      #nav li {
      float: right;
      margin-right: 10px;
  }
  
  #nav a {
      display: block;
      padding: 5px;
      color: #444444;
      background: #fff;
      text-decoration: none;
      border: 1px solid grey;
  }
  
  #nav a:hover {
      color: #fff;
      background: #04B431;
  }
  </code></pre>
  
  <p>I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.</p>
  
  <p>Similar to how this looks:</p>
  
  <p><a href="http://jsfiddle.net/6PY7z/" rel="nofollow">http://jsfiddle.net/6PY7z/</a></p>
  
  <p>Can this be done using the UL menu method?</p>
  
  <p>Thanks for any advice, I'm no expert with HTML / CSS.</p>