title: CSS border-bottom hover on navigation menu
body: <p>I have a problem with border-bottom property. I want my border-bottom to go from the bottom to the top of my li element which is 80px height. When I try with border-top it moves my "header nav ul li a" element 80px to bottom. Anyone have an idea?</p>
  
  <pre><code>&lt;section class="intro"&gt;
      &lt;header&gt;
          &lt;div class="wrapper"&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li class="nav_home"&gt;&lt;a href="#" onclick="return false;"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav_folio"&gt;&lt;a href="#" onclick="return false;"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav_about"&gt;&lt;a href="#" onclick="return false;"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="nav_contact"&gt;&lt;a href="#" onclick="return false;"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;&lt;!-- end nav-menu ul !--&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/section&gt;
  
  .wrapper {
      width: 1180px;
      margin: 0 auto;
      position: relative;
  }
  
  .intro {
      width: 100%;
      height: 100%;
      background: url(../images/banner.jpg) no-repeat;
      background-position: center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  header {
      top: 0;
      position: fixed;
      left: 0;
      right: 0;
      width: 100%;
      height: 80px;
      color: #aaa;
      text-align: center;
      background: transparent;
      border-bottom: 3px solid rgba(72, 191, 114, 1);
      z-index: 99;
  }
  
  header nav {
      float: right;
  }
  
  header nav ul {
      list-style: none;
      float: left;
  }
  
  header nav ul li {
      position: absolute;
      float: left;
      margin-left: 5px;
      width: 120px;
      border-bottom: 0px solid transparent; 
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
      height: 80px;
      line-height: 80px;
  } 
  
  header nav ul li a {
      font-size: 1.2em;
      text-transform: uppercase;
      text-decoration: none;
      text-align: center;
      color: #fff;
      outline: none;
  }
  
  header nav ul li:hover {
      border-bottom: 80px solid #48bf72; 
      cursor: pointer;
  }
  </code></pre>