I want to have a border (looks like underline) that moves up on hover.

So if this is a link:

LINK

Then if I hover on it

LINK  

""""

Example from the website:
<http://matthias-schoenaerts.com/>
(navigation bar)

I want it as simple as possible.

This is what I came up with:
<http://jsfiddle.net/Lxxqz3pL/>

HTML:

```
<ul id="nav">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Our Products</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Login</a></li>
</ul>

```

CSS:

```
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: center;
margin: 0 0 3em 0;
left: 0;
padding: 0;
list-style: none;
background-color: #333333;
border-bottom: 1px solid #ccc; 
border-top: 1px solid #ccc; 
position: absolute;
}

#nav li {
float: left; 
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}

#nav li a:hover {
transition: border .5s ease-in;
background-color: #fff; 
border-bottom: 3px solid red;
}
/* End navigation bar styling. */

```