I have horizontal menu on my website. I want the menu links to smoothly underline. HTML

<nav id="nav_container">
    <ul id="nav">
        <li class="nav_item"><a href="#">Sportovci</a></li>
        <li class="nav_item"><a href="#">Specialisté</a></li>
        <li class="nav_item"><a href="#">Kluby</a></li>
        <li class="nav_item"><a href="#">Obchody</a></li>
        <li class="nav_item"><a href="#">Ligy</a></li>
        <li class="nav_item"><a href="#">Články</a></li>
        <li class="nav_item"><a href="#">Kontakt</a></li>
    </ul>
</nav>           

CSS

.nav_item {
    display: inline-block;
    margin: 0 10px;
}

.nav_item:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

.nav_item:hover:after {
    width: 100%;
    background: #236fe8;
}

With this code the link will underline from left to right on hover, but when i go out with mouse it doesn't smoothly go back. I think it will be some JavaScript (jQuery), but don't know how. I also want the clicked (active) link to stay underlined. How to do this?

I will be thankful for every kind of answer.

I have horizontal menu on my website. I want the menu links to smoothly underline. HTML

<nav id="nav_container">
    <ul id="nav">
        <li class="nav_item"><a href="#">Sportovci</a></li>
        <li class="nav_item"><a href="#">Specialisté</a></li>
        <li class="nav_item"><a href="#">Kluby</a></li>
        <li class="nav_item"><a href="#">Obchody</a></li>
        <li class="nav_item"><a href="#">Ligy</a></li>
        <li class="nav_item"><a href="#">Články</a></li>
        <li class="nav_item"><a href="#">Kontakt</a></li>
    </ul>
</nav>           

CSS

.nav_item {
    display: inline-block;
    margin: 0 10px;
}

.nav_item:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

.nav_item:hover:after {
    width: 100%;
    background: #236fe8;
}

With this code the link will underline from left to right on hover, but when i go out with mouse it doesn't smoothly go back. I think it will be some JavaScript (jQuery), but don't know how. I also want the clicked (active) link to stay underlined. How to do this?

I will be thankful for every kind of answer.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 12, 2013 at 13:20 Eliezer Bernart 2,4242525 silver badges3333 bronze badges asked Dec 12, 2013 at 13:00 user2061217user2061217 6

• 18 Looks ok to me ? jsfiddle/fX6xz Also tested in, Chrome, Firefox and IE. – Scott Commented Dec 12, 2013 at 13:04
• yes, looks ok to me too.. – skos Commented Dec 12, 2013 at 13:04
• 2 Maybe you want to add an #nav_container a { text-decoration: none; } to make your effect more visible. – Eliezer Bernart Commented Dec 12, 2013 at 13:16
• 1 make sure you add browser prefixes, -moz-transition, etc. – dfsq Commented Dec 12, 2013 at 13:20
• 1 FYI: doesn't work with my IE10 – Anto Jurković Commented Dec 13, 2013 at 22:00

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 2

How about targeting the anchors instead of the .nav_items like so:

a:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

a:hover:after {
    width: 100%;
    background: #236fe8;
}

Here your updated jsFiddle.

replace your code with this one

.nav_item:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;`enter code here`
    background: transparent;
    transition: width .5s ease, background-color .9s ease;
}

go to the following link for more help, i hope it will resolve your problem http://www.w3schools./cssref/css3_pr_transition-timing-function.asp