Border-bottom needs to move up on hover - html

Question

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>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</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. */

Answer 1

Here is updated CSS, does it what you trying to get?
/* 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;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
}
#nav li a:after{
display:block;
width:100%;
height:0px;
content:" ";
border:1px solid red;
position: relative;
top:10px;
}
#nav li a:hover:after{
transition: 0.5s ease-in;
transform: translate(0px, -10px);
}
/* End navigation bar styling. */

Answer 2

I've modified your code in areas to get the desired effect
DEMO http://jsfiddle.net/Lxxqz3pL/3/
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
padding: 22px 0 35px;
color: #a3a3a3;
border-bottom: 3px solid #6a901b;
transition: all 0.5s ease;
}
#nav li a:hover {
transition: all 0.5s ease;
color: #fff;
padding-bottom: 5px;
}

Answer 3

How about something like this? FIDDLE.
Just keep the background fixed, add a border at the bottom, and make the height of the anchor smaller.
Relevant CSS
#nav li {
float: left;
height: 40px;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #a3a3a3;
height: 20px;
transition: height 0.5s;
}
#nav li a:hover {
height: 10px;
border-bottom: 3px solid red;
}

Answer 4

It looks like the example site uses flexNav, a jQuery plugin.
http://jasonweaver.name/lab/flexiblenavigation/
Here's a quick-fix solution. I added a transition to <li> padding to compensate for the added border.
http://jsfiddle.net/Lxxqz3pL/1/