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.
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
lokesh
December 11, 2018 @ 7:13 am
create the ul inside the li your problem will be solved.
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
[email protected]
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.
vijay
April 15, 2020 @ 11:54 am
Hi please Give CSS for Another Submenu.
TCG
April 15, 2020 @ 3:39 pm
You can view the source in this page: https://www.thecodingguys.net/demo/css/css-vertical-menu-multiple-levels.html
I believe this is what you’re looking for.
SAI SRIDAR SIVAPRAKASAM
August 24, 2020 @ 10:41 am
Can you please help me, if the sub menu has more items than the parent menu.. then the sub menu list gets truncated, it shows only the no of items equal to parent menu item. for example the parent menu has 6 items… if the sub menu of any parent item has more than 6 items, it displays only six… though the item is seen view source. your help is highly appreciated. Many Thanks.
gabigoshen
March 1, 2021 @ 11:07 pm
Hello there, i really love the way you made it and thanks for your explanations, im new to this and i wanted to ask you, can you please show me how to make everything rtl? im using it for a hebrew website and its all right side here, and if you can please show me how to add another submenu to the submenu so it could open up another mini tab?
like for example parent menu is for categories, sub menu shows the different items in the categories and when you hover over the item, another single line height tab opens up with the price tag or something, thank you very much!
Jose Marin
August 11, 2021 @ 10:50 am
Good afternoon, looking for a simple example of vertical menu have found this one and to be honest it is more than I need.
Now I am looking for having marked an item from main menu at time of going to the second one, and having one item marked from the first and second at time of selecting one from the 3rd one (when i say marked, is selected or background color)
Thks