title: CSS, Text-Decoration: Overline
body: <p>I'm trying to create an overline effect on hover with css.  What I have so far is below.  Here's the problem I have, the over line appears directly above the text.  I want there to be some space b/w them.  Here is my site: <a href="http://baycity2014.weebly.com" rel="nofollow">http://baycity2014.weebly.com</a>, and here's the effect I'm going for: <a href="http://www.hartlevin.com" rel="nofollow">http://www.hartlevin.com</a>.  Any advice?</p>
  
  <p>CSS:</p>
  
  <pre><code>#nav-wrap .container {
      clear: both;
      overflow: hidden;
      position: relative;
  }
  
  #nav-wrap .container {
      /*background:url(nav-bg-medium.jpg) repeat-x top;*/
      /*height:45px;*/
  }
  
  #nav-wrap .container ul {
      list-style: none;
  }
  
  #nav-wrap .container ul li {
      list-style: none;
      float: left;
      /* background:url(nav-saperator-medium.jpg) no-repeat right;*/
      padding-right:2px;
  }
  
  #nav-wrap .container ul &gt; li:first-child a,
  #nav-wrap .container ul &gt; li:first-child a:hover,
  #nav-wrap .container ul span:first-child li a,
  #nav-wrap .container ul span:first-child li a:hover{
      border-radius:5px 0px 0px 5px;
  }
  
  #nav-wrap .container ul li a {
      float: left;
      display: block;
      font-family: 'Helvetica', san-serif;
      color: #000;
      padding: 0px 30px;
      border: 0px solid;
      outline: 0;
      list-style-type: none;
      font-size: 16px;
      line-height:45px;
      /*text-shadow: 0px -1px 0px #333333;*/
  }
  
  #nav-wrap .container ul li:hover {
      /*background:url(nav-saperator-hover-medium.jpg) no-repeat right;*/
  }
  
  #nav-wrap .container ul li a:hover {
      /*background:url(nav-bg-hover-medium.jpg) repeat-x top ;*/
      color: #145D85;
      text-decoration:overline;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="left_content_nav"&gt;
      &lt;ul class='wsite-menu-default'&gt;
          &lt;li id='active'&gt;&lt;a href='/'&gt;Home&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li id='pg886612977153583720'&gt;&lt;a href='/about.html'&gt;About&lt;/a&gt;
  
              &lt;div class='wsite-menu-wrap' style='display:none'&gt;
                  &lt;ul class='wsite-menu'&gt;
                      &lt;li id='wsite-nav-226730044254468285'&gt;&lt;a href='/blog.html'&gt;&lt;span class='wsite-menu-title'&gt;Blog&lt;/span&gt;&lt;/a&gt;
  
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id='pg336904325932674008'&gt;&lt;a href='/practice-areas.html'&gt;Practice Areas&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li id='pg342722679661255807'&gt;&lt;a href='/press.html'&gt;Press&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li id='pg204649403653981064'&gt;&lt;a href='/contact.html'&gt;Contact&lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>