Vertical menu css with submenus

How to create a nested vertical menu with horizontally sub-menus using css

I want to change a list to be vertical but after changing a lot of css code the inside list that should go horizontal is going vertical and i cant find why.

nav ul ul < display: none;>nav ul li:hover > ul < display: block; >nav ul < background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); box-shadow: 0px 0px 9px rgba(0,0,0,0.15); padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display:list-item; >nav ul:after < content: ""; clear: both; display: block; >nav ul li < float: left; >nav ul li:hover < background: #4b545f; background: linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); >nav ul li:hover a < color: #fff; >nav ul li a < display: block; padding: 25px 40px; color: #757575; text-decoration: none; >nav ul ul < background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; >nav ul ul li < display:list-item; float: right; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative; >nav ul ul li a < padding: 15px 40px; color: #fff; >nav ul ul li a:hover < background: #4b545f; >nav ul ul ul

1 Answer 1

So you want the parent menu items to be positioned vertically (go down each other) and the nested sub-menus to be positioned horizontally (to go to left of each other).

suppose it’s our html markup:

to position the parent menu items we just tell them to clear their left . so no element can be floated to their right:

(also note that to specify only the parent menu item we have used > the Child combinator. so this style will not effect inner li s. only parent li s get that css property.)

Then we hide the sub-menu items and let them only appear only on mouse over:

nav > ul > li ul < display: none; >nav > ul > li:hover ul

the last thing is to tell the sub-menu items to be floated to left and to be displayed as inline elements. so this way we get the desired horizontally oriented sub-menu items.

and here we come to tricky part of positioning sub-menu relative to parent. to do so we use absolute positioning for children and set the position:relative for their parent so the children get positioned relative to this parent not the global parent that is body element

nav > ul > li < position: relative; >nav > ul > li ul

here is a working demo: http://jsfiddle.net/VCX7T/6/ and this is complete css code:

nav > ul > li < clear: left; position: relative; >nav > ul > li ul < display: none; >nav > ul > li:hover ul < display: block; >nav > ul > li ul < position: absolute; left: 100px; top: 0; >nav > ul > li ul li < float: left; display: inline-block; >​ 

Источник

Create a vertical menu in CSS3 and HTML

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.

element to show the sub menu.

HTML 5 Markup

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

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

element underneath (>) this
. 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.

21 Comments

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

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

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]

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.

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 ?

@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?

@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();
>);

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

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

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.

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.

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.

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!

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

Leave a Reply Cancel reply

Источник

Build vertical menu with sub-menus

I’m building my own vertical menu in CSS3 & HTML5:
I’m need devide first «item 1» into two buttons, the first is still «Item 1», the second is a arrow button, that will open/close hidden ul with sub-items. Something like that:
1st button — calls default action choosen from sub-tems.
2nd buton — gaves to user make own choose, what do now or what do always when 1st button pressed. How I can devide the first item into two that buttons? The HTML:

.WMenu < background: url("../images/WMenu/bg.png"); background-repeat: repeat-z; background-attachment: fixed; list-style-type: none; font-family: Verdana,Geneva,sans-serif; font-size: 12px; height: 100%; width: 200px; margin: 0 0 0 10px; padding: 0; >/*Выпадающее под-меню */ .WMenuPopup < list-style-type: none; >.WButton < background: #feffff; background: -moz-linear-gradient(top, #feffff 0%, #ddf1f9 35%, #a0d8ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef)); background: -webkit-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background: -o-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background: -ms-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); background: linear-gradient(to bottom, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); padding: 4px; margin-right: 2px; margin-bottom: 2px; width: auto; height: auto; >.WButton:hover

You could add a button, span, div, ul li to item one, style it and do whatever you really wanted to it from there

Источник

Add a vertical Sub menu using css and html

I have a menu drop down list which is done using css and html. Now, I want to have an extension of sub menu on the existing sub menu, when I hover the «Audit Report for example, it should show another sub menu vertically. How can I achieve that? This is my existing codes in css and html. css

 .menuPanel < width: auto; height: 32px; top: 5px; border-bottom: 1px solid #808080; background-color: #4f4545; >.nav,.nav ul < list-style: none; margin:0; padding:0; >.nav < position:relative; left: 2px; height: auto; >.nav ul < height:0; left:0; overflow: hidden; position:absolute; >.nav li < float:left; position:relative; >.nav li a < -moz-transition:1.0s; -o-transition:1.0s; -webkit-transition:1.0s; transition:1.0s; background-color: #4f4545; display: block; color:#FFF; text-decoration:none; font-size:12px; line-height:32px; padding:0px 30px; >.nav li:hover > a < background: #8CCA33; border-color: #6E67A6; color:#fff; >.nav li:hover ul.subs < height:auto; width: 250px; z-index: 10; >.nav ul li < -moz-transition:0.3s; -o-transition:0.3s; -webkit-transition:0.3s; opacity:0; transition:0.3s; width:100%; >.nav li:hover ul li < opacity:1; -moz-transition-delay:0.2s; -o-transition-delay:0.2s; -webkit-transition-delay:0.2s; transition-delay:0.2s; >.nav ul li a < background: #4f4545; border: 1px solid #808080; color:#fff; line-height:1px; -moz-transition:1.5s; -o-transition:1.5s; -webkit-transition:1.5s; transition:1.5s; >.nav li:hover ul li a < line-height:32px; >.nav ul li a:hover

2 Answers 2

You have to do a new CSS-Style for .nav .subs ul for the whole block or .nav .subs ul li for a single element of the block

.nav .subs li ul < max-height: 0; -moz-transition:1.5s; -o-transition:1.5s; -webkit-transition:1.5s; transition:1.5s; >.nav .subs li:hover > ul < max-height: 300px; height: auto; >.nav .subs li ul

this just shows the new block, if you hover over a submenu-item, now you only have to style it and place it whereever you want it

Источник

Pure CSS Vertical Menu with Submenu – Accordion Menu

1. First of load Font Awesome 5 for menu icons by adding the following CDN link in the head tag of your HTML page.

2. After that, create HTML structure for vertical menu like below and add your menu links. If you are unsure about icons, you may get started with Font Awesome.

3. Now its time to stylize your menu, you can add style.css file into head tag of your HTML document.

4. If you want to add inline styles (or customize css classes). Use the following CSS.

.menu < width: 300px; border-radius: 8px; overflow: hidden; >.item < border-top: 1px solid #18dcff; overflow: hidden; >.btn < display: block; padding: 16px 20px; background: #17c0eb; color: white; position: relative; >.btn::before < content: ""; position: absolute; width: 14px; height: 14px; background: #17c0eb; left: 20px; bottom: -7px; transform: rotate(45deg); >.btn i < margin-right: 10px; >.smenu < background: #333; overflow: hidden; transition: max-height 0.3s; max-height: 0; >.smenu a < display: block; padding: 16px 26px; color: white; margin: 4px 0; position: relative; >.smenu a::before < content: ""; position: absolute; width: 6px; height: 100%; background: #18dcff; left: 0; top: 0; transition: .3s; opacity: 0; >.smenu a:hover::before < opacity: 1; >.item:target .smenu

You have done, save your pure CSS vertical menu with submenu and enjoy 🙂

Related Code Snippets:

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Leave a Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

Popular

• 65+ Login Page in HTML with CSS Code Sample Simple to Difficult — 646,981 views
• 25+ Best JavaScript Shopping Cart Examples with Demo — 131,350 views
• Bootstrap Multiselect Dropdown with Checkboxes — 117,334 views
• Bootstrap 5 Buttons with Icon and Text Tutorial & Demo — 89,890 views
• 19+ Bootstrap Select Dropdown with Search Box Tutorial & Examples — 80,840 views
• Bootstrap Vertical Menu with Submenu on Click — 64,358 views
• 99+ Social Media Buttons HTML Code Sample & Tutorial — 62,374 views
• Bootstrap 5 Sidebar Menu with Submenu Collapse/Hover Tutorial Demo — 61,434 views
• Bootstrap 4 Modal Popup Login Form Tutorial & Demo — 57,632 views
• 19+ Bootstrap 5 Mega Menu Responsive/Drop Down Examples — 50,280 views

Free Web Design Code & Scripts — CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners. find out more.

CodeHim

Top Categories

Get in Touch

Follow us on social media to be updated with latest web design code & scripts.

Источник