title: Navigation bar -- links don't work
body: <p>On the navigation bar, the link only works if I hover over the <strong>TEXT</strong> however it doesnt work if I hover underneath or above the text (between the 1 px horizontal lines and the text) here is a link to the jsfiddle <a href="http://jsfiddle.net/hp20wcrd/" rel="nofollow">http://jsfiddle.net/hp20wcrd/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .menu {
      font-family: Verdana, Arial; 
      position:fixed; 
      background:transparent;
      width:100%; 
      top:100px; 
      left:0; 
      height:25px;       /* decide on this as some stage */
      padding: 0;
      text-align:center;
      font-size: 12px;
      font-weight: 600;  /* decide on this as some stage */
      padding-top: 10px;  /* decide on this as some stage */
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
  }
  
  .ty-menu__items {
      position: absolute;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      width:100%;
      text-align: center;
  }
  
  .ty-menu__item {
      display: inline-block;
      padding-right: 50px;
      padding-left: 50px;
      }
  
  a:link, a:visited {
      display: block;
      width: 100%;
      font-weight: light;
      color: #494949;
      background: transparent;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
  }
  
  a:hover, a:active {
      padding-bottom:7px;  /* decide on this as some stage */
      background: transparent;
      border-bottom: 3px solid #9B9B9B; /* decide on this as some stage */
      color: #9B9B9B; /* decide on this as some stage */
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="menu"&gt;
  &lt;ul class="ty-menu__items"&gt;
    &lt;li class="ty-menu__item"&gt;&lt;a href="#home"&gt;home&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ty-menu__item"&gt;&lt;a href="#news"&gt;news&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ty-menu__item"&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
    &lt;li class="ty-menu__item"&gt;&lt;a href="#about"&gt;about&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>