Vertical Slide Hover Effect for Menu Bars with CSS3


A hover effect is the transition that takes place when you move your pointer over a menu bar item. Such hover effects can be used anywhere but mostly they are used for navigation bars and other kinds of menus.

There are various kinds of hover effects around the internet, but a very popular one is the vertical slide. This effect is subtle, stylish and effective.

If this effect is not a new one, then why am I teaching it? That’s because earlier this effect was used to be created with JavaScript (or with Flash in the prehistoric days). But we will be creating it using pure CSS.

A navigation bar the backbone of a web design. Design this right and you get good conversion rate. So you have to pay lots and lots of attention towards designing navigation bars. This is the reason we share so many posts on navigation bars.

Let’s not waste anymore time. Here’s the tutorial. Don’t forget to check out the demo.
And in the end, don’t forget to tell us what you think of it. You can use the comments section below.

Thanks for tuning in.

Live Demo


<ul id="nav">
	<li class="home"><a href="#">Home</a></li>
	<li class="tutorials"><a href="#">Tutorials</a></li>
	<li class="about"><a href="#">Coding</a></li>
	<li class="news"><a href="#">WordPress</a></li>
	<li class="contact"><a href="#">Contact</a></li>

CSS Code

ul li {
list-style: none;
height: 44px;
padding:10px 5px;
ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
color: #fff;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
li:nth-child(1) a {
border-color: #636393;
li:nth-child(2) a {
border-color: #B5222D;
li:nth-child(3) a {
border-color: #D4953C;
li:nth-child(4) a {
border-color: #609491;
li:nth-child(5) a {
border-color: #87A248;
li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;

Live Demo

See you tomorrow. :))

create free website wix below post

Further Related Readings

  1. ayesha August 28, 2014 at 11:33 am

    Asalaam o alaikum
    i want to know that why did you make classes for each li? what’s the purpose for doing so? please tell me..

  2. Ayaz Malik August 28, 2014 at 1:38 pm

    Hi Ayesha,
    You see some super browsers like Internet Explorer don’t do well with css3, so in this case this chunk of code for selecting child li won’t work

    li:nth-child(1) a {
    border-color: #636393;

    in that case you can apply the css of border colors to those class names. In short you can also assign the class names to these css properties for browsers that don’t fully support html5/css3.
    Feel free to ask if there is anything else you want to know.

  3. deep December 11, 2014 at 11:06 am

    very beautiful menu.i like it did,t work on my webpage :)

    1. Ayaz Malik December 15, 2014 at 1:05 am

      Hello Deep,
      go to view demo page, right click, view page source, and see if your code is similar.

  4. phyophyo July 1, 2015 at 4:44 pm

    thank you for your tutorial. really helpful and appreciate it. I’m trying to use border-left instead of border-bottom. but when i mouse over the text is shift to right too. like this
    pleas advice.

    1. Ayaz Malik July 1, 2015 at 4:52 pm

      can you please provide me link to the running html/uploaded version instead of image, i can debug it and give you a solution.

  5. phyophyo July 1, 2015 at 5:01 pm

    here it is. pleas kindly take a look.

    –Code Removed–

  6. phyophyo July 1, 2015 at 8:29 pm

    yes. I just sent to your mail with attached file. thank you so much

  7. Hasan July 31, 2015 at 8:52 am

    Thanks for the contribution of knowledge.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved