Create a vertical menu in CSS3 and HTML

The Concept

Simple menus using CSS3 and HTML5 are becoming quite popular because you don’t need JQuery or JavaScript to add animations. We will demonstrate a quick way to create a nice, clean vertical menu with a sub menu which slides out.

The menu will use a nested <ul> element to show the sub menu.

HTML 5 Markup

<nav id="menu">

        <ul class="parent-menu">

            <li><a href="#">Home & Kitchen</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Electronics</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Clothing</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul></li>

            <li><a href="#">Cars & Motorbikes</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Books</a>

                <ul>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                    <li><a href="#">item</a></li>

                </ul>

            </li>

            <li><a href="#">Support</a>

                <ul>

                    <li><a href="#">Contact Us</a></li>

                    <li><a href="#">Forum</a></li>

                    <li><a href="#">Deliveries</a></li>

                    <li><a href="#">T&C</a></li>

                </ul>

            </li>

        </ul>

    </nav>

CSS

Parent CSS

   p, ul, li, div, nav
        {

            padding:0;
            margin:0;
        }


        body
        {
            font-family:Calibri;
        }


        #menu {
            overflow: auto;
            position:relative;
            z-index:2;
        }


        .parent-menu {
            background-color: #0c8fff;
            min-width:200px;
            float:left;
        }


        #menu ul
        {
            list-style-type:none;
        }


        #menu ul li a
        {

            padding:10px 15px;
            display:block;
            color:#fff;
            text-decoration:none;
        }


            #menu ul li a:hover
            {
                background-color:#007ee9;
            }

The menu works in a very simple way. The parent container needs to be positioned relative so that the submenu can show inside of it. You also need to set the z-index so the parent menu is above the submenu (this will be described later). Each <li> element is floated left and has a min-width so they are equal in size. Do not give the <li> a display block or inline-block, as this will make them float side by side.

Sub Menu

#menu ul li:hover > ul {

                left: 200px;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #menu ul li > ul {

                position: absolute;

                background-color: #333;

                top: 0;

                left: -200px;

                min-width: 200px;

                z-index: -1;

                height: 100%;

                -webkit-transition: left 200ms ease-in;

                -moz-transition: left 200ms ease-in;

                -ms-transition: left 200ms ease-in;

                transition: left 200ms ease-in;

            }


            #menu ul li > ul li a:hover

            {

                background-color:#2e2e2e;

            }

The submenu is positioned absolute and is floated left:-200px, which will make it show off screen. When we hover over the parent <li> we show the <ul> element underneath (>) this <li>. We position it left:200px so it comes in view side by side to the parent menu, and we also give it a height of 100% so it remains equal.

You must set the z-index to -1 so that the menu is underneath the parent menu. This will allow it to slide properly without any jerking.

Notes

If you change the width of the parent or submenu make sure you change the left position value of the submenu.

To change the speed of the animation set the numeric value in this code as you like.

-webkit-transition: left 200ms ease-in;
 -moz-transition: left 200ms ease-in;
 -ms-transition: left 200ms ease-in;
 transition: left 200ms ease-in;

The menu has been tested in Chrome 34+, Firefox 28.0+, and IE 11.0.

15 Comments

Roberto
November 3, 2014 @ 8:46 am

Hello my name is Roberto

I write from Spain. First thank you for your blog and yours tutorials. I found your blog searching about how to create a vertical menu, and your tutorial is awesome. But I have one question:

How can I get the same effect with third level menu, the tutorial is teaching me how to do this effect in the first and second level menu, but I need third level, I am working on this for several days but I can't get it works.

Thanks and sorry for my bad english

- John Morton
  February 26, 2015 @ 8:59 pm
  
  Did you ever solve your problem. I have the same problem. I would appreciate any suggestions that you may provide.
  Thanks
  John T. Morton III
  
John Morton
February 26, 2015 @ 8:57 pm

I have this website with a broken css verticle menu that is three levels deep. Someone else provided this code. I think it was developed using opencube. I'm trying to replace it with my own code. I've wrote a lots of code but I never tried css. I used this code in this example and have been able to change it to my liking. I have not been able to add a third level and I sure could use some help. Also, when the second and third levels slide out, I'd like to limit the box to the amount of elements in that selected item.
I'll keep trying but would appreciate some help.

Thanks
John T. Morton III
jtmortoniii@att.net

thecodingguys-admin
February 27, 2015 @ 1:07 pm

The above code does work with multiple levels. Check it out here:

https://www.thecodingguys.net/demo/css/css-vertical-menu-multiple-levels.html

- Hemerson
  October 2, 2015 @ 9:15 am
  
  sir how can i fix z-index position in 3rd level and up? bacause although the 3rd level background z-index position is fixed under the two levels but the text seems to be seen transitioning over the 2nd level.
  
sachin
March 9, 2015 @ 9:20 am

Hello ,

Thanks for creating such a nice and clean css for us. It is very helpful.

How can i get sub menu to align with the parent menu ? So that it doesn't always start from top instead it will start from the parent. ? What changes are required to achieve that ?

- Christian Sanchez
  June 2, 2015 @ 3:17 am
  
  @sachin, i'm interested in doing the same thing so that the submenu pops out inline with the parent li. Were you able to figure it out?
  Also, I would like to know what change is required to make the height of the submenu be as tall as the filled elements and not the same height of the entire parent menu. Anyone know how to make that happen?
  
  - Christian Sanchez
    June 12, 2015 @ 5:19 pm
    
    @sachin, I seem to have made a few additions in order to achieve the height of the submenu only to be as tall as the number of items instead of the entire menu and position the submenu to popout inline with the parent.
    
    Firstly, I added the class "submenu" to each submenu ul element. Then in my CSS I did this:
    ul.submenu {
    height: auto;
    }
    
    For the submenu to open in line with the parent menu, I added the following jQuery to my menu file:
    
    jQuery(document).ready(function(){
    jQuery(".submenu").parent().css({position: 'relative'});
    });
    
Istiaq Hasan
March 17, 2015 @ 7:47 am

Actually I am facing some problems.
What will we do if we have more sub-menu i.e:item than the total menu options.
Example: for Home & kitchen, you showed 6 items. But If Have 7 items or more what will be necessary change?

Thank You

Henry Toringe
March 24, 2015 @ 8:10 am

Thanks codingguys, i used your css vertical menu on my website.

pradeep
May 5, 2015 @ 11:59 am

I wan to have a close(X) in the main menu. How to do this?
Thanks in advance

ali imarn
June 23, 2015 @ 10:42 am

how can make this menu responsive

Armando Herrera
July 13, 2015 @ 9:20 pm

Hello i have a question, what can i do if a menu has much more submenus than the number of menus, example 8 or 10 or 12 submenus in a menu

Thank You very much

amene
March 4, 2017 @ 10:27 pm

Hello
What can i do submenu right to left?
thank u.

Michelle L Smith
June 27, 2017 @ 9:06 pm

Hello! How would I add fixed to the code? Also, How would I put the vertical menu below a right sidebar? The vertical menu is going to be on the right side below the bottom of the sidebar.