title: How to add space between border line and menu item
body: <p>I'm trying to add space between a bottom border line and my <code>&lt;li&gt;</code> item but no luck.</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;div class="menuwrap"&gt;
      &lt;div class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Query&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Reports&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS styles:</p>
  
  <pre class="lang-css prettyprint-override"><code>.menu {
      color: #000;
      background: #FFF;
  }
  .menu ul {
      list-style: none;
      display: inline;
      float: left;
      padding-left: 40px;
      margin-top: 90px;
  }
  .menu li {
      float:left;
      margin-left:10px;
  }
  .menu li a:hover {
      padding: 0 10px 0 10px;
      font-size: xx-large;
      border-bottom: 1px solid white;
      border-spacing: 20px;
  }
  .menu li a {
      text-decoration: none;
      color: #000;
      font-weight: bold;
      font-size: large;
  }
  .menuwrap {
      overflow:hidden;
  }
  </code></pre>
  
  <p>I tried couple of different things, but nothing worked so far. border-spacing is not doing what I want. I tried padding-bottom and that also didn't work. Can someone tell me how to achieve that? I want a space between the "li" item and its border-bottom.</p>