title: Add space between <li> elements
body: <p>I have a nav-menu on which it seems that I can't add a space (<code>margin: 3px;</code>) between the <code>&lt;li&gt;</code> elements. </p>
  
  <p>You can see the HTML and CSS code on this <a href="http://jsfiddle.net/bpmKW/" rel="noreferrer">jsfiddle</a> or below. </p>
  
  <p>You will see that I've added a <code>border-bottom: 2px solid #fff;</code> to the <code>#access li</code> to simulate the space between elements, but that is not going to work because under the nav-menu I will have a bunch of different colors. If I add <code>margin-button: 2px</code> it doesn't work. </p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;nav id="access" role="navigation"&gt;
      &lt;div class="menu-header-menu-container"&gt;
          &lt;ul id="menu-header-menu" class="menu"&gt;
              &lt;li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"&gt;
                  &lt;a href="http://localhost:8888/fullstream/?page_id=5"&gt;About Us&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"&gt;
                  &lt;a href="http://localhost:8888/fullstream/?page_id=7"&gt;Services&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"&gt;
                  &lt;a href="http://localhost:8888/fullstream/?page_id=9"&gt;Environmental Surface Cleaning&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"&gt;
                  &lt;a href="http://localhost:8888/fullstream/?page_id=11"&gt;Regulations&lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"&gt;
                  &lt;a href="http://localhost:8888/fullstream/?page_id=13"&gt;Contact Us&lt;/a&gt;
              &lt;/li&gt;
         &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the CSS: </p>
  
  <pre><code>#access {
      background: #0f84e8; /* Show a solid color for older browsers */
      display: block;
      margin: 0 auto 6px 55px;
      position: absolute;
      top: 100px;
      z-index: 9999;
  }
  #access ul {
      font-size: 13px;
      list-style: none;
      margin: 0 0 0 -0.8125em;
      padding-left: 0;
  }
  #access li {
      position: relative;
      padding-left: 11px;
  }
  #access a {
      border-bottom: 2px solid #fff;
      color: #eee;
      display: block;
      line-height: 3.333em;
      padding: 0 10px 0 20px;
      text-decoration: none;
  }
  
  #access li:hover &gt; a,
  #access ul ul :hover &gt; a,
  #access a:focus {
      background: #efefef;
  }
  #access li:hover &gt; a,
  #access a:focus {
      background: #f9f9f9; /* Show a solid color for older browsers */
      background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
      background: -o-linear-gradient(#f9f9f9, #e5e5e5);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
      background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
      color: #373737;
  }
  #access ul li:hover &gt; ul {
      display: block;
  }
  </code></pre>