How to add second level to a submenu in a dropdown navigation css
I edited your code above to make it work, see http://jsfiddle.net/BVvc6/1/ for the new code.
Note: I added two menu points below Storybooks called Storybook 1 and Storybook 2. CSS is added to the bottom of the existing code (nothing altered above).
EDIT: You should clear up your CSS code a bit, e.g. use CSS selectors like > to match specific DOM levels.
Add second level to existing nav bar Dropdown menu
For Example:
In CSS:
a {
color: #FFF;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
In Html:
<nav>
<ul>
<li><a href="#">What is it?</a></li>
<li>
<a href="#">Inventory</a>
<ul>
<li>
<a href="#">X-box 360</a>
<ul>
<li><a href="#">Building Blocks</a></li>
<li><a href="#">Decorations</a></li>
<li><a href="#">Redstone & Transportation</a></li>
<li><a href="#">Materials</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Tools, Weapons & Armor</a></li>
<li><a href="#">Brewing</a></li>
<li><a href="#">Miscellaneous</a></li>
</ul>
</li>
<li>
<a href="#">PC</a>
<ul>
<li><a href="#">Building Blocks</a></li>
<li><a href="#">Decoration Blocks</a></li>
<li><a href="#">Redstone</a></li>
<li><a href="#">Transportation</a></li>
<li><a href="#">Miscellaneous</a></li>
<li><a href="#">Foodstuff</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Combat</a></li>
<li><a href="#">Brewing</a></li>
<li><a href="#">Materials</a></li>
</ul>
</li>
<li>
<a href="#">Mobile</a>
<ul>
<li><a href="#">Materials</a></li>
<li><a href="#">Tools & Weapons</a></li>
<li><a href="#">Decoration Blocks</a></li>
<li><a href="#">Building Blocks</a></li>
</ul>
</li>
<li>
<a href="#">PS4</a>
<ul>
<li><a href="#">Building Blocks</a></li>
<li><a href="#">Decorations</a></li>
<li><a href="#">Redstone & Transportation</a></li>
<li><a href="#">Materials</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Tools, Weapons & Armor</a></li>
<li><a href="#">Brewing</a></li>
<li><a href="#">Miscellaneous</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
How to add second level to a submenu in a dropdown navigation css in Blogger
Okay, if you edit the HTML & the CSS, here is how you could do it:
HTML
One of the HTML Dropdown menus look like this:
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
Add this code after the Dropmenu </a> tag:
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
So it to look like this:
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
CSS
Then, add this CSS:
#menu .menus li > ul.menus {
transform: translateX(100%) scale(1.0);
top: 0;
}
#menu ul.menus {
overflow: visible !important;
}
Final Result
It should look like this when you're done:
/* CSS Main Menu */
#menu .menus li > ul.menus { transform: translateX(100%) scale(1.0); top: 0;}
#menu ul.menus { overflow: visible !important;}
#menu-wrapper { background: #353535; height: 50px; width: 100%; position: relative; z-index: 99;}
#menu { color: #fff; height: 50px; max-width: 1100px; margin: 0 auto; -webkit-transform: translateZ(0);}
#menu ul,#menu li { margin: 0; padding: 0; list-style: none;}
#menu ul { height: 50px}
#menu li { float: left; display: inline; position: relative; font-family: 'Oswald'; font-size: 14px; font-weight: 400; text-transform: uppercase;}
#menu li a { color: #fff;}
#menu a { display: block; line-height: 50px; padding: 0 20px; margin: 0; text-decoration: none; color: #fff; transition: all 0.2s ease-in-out;}
#menu li:hover > a { color: #f8a82a;}
#menu li a:hover { color: #f8a82a;}
#menu input { display: none; margin: 0; padding: 0; width: 80px; height: 50px; opacity: 0; cursor: pointer}
#menu label { font-family: 'Oswald'; font-size: 30px; font-weight: 400; width: 35px; height: 51px; line-height: 51px; text-align: center}
#menu label span { font-size: 13px; position: absolute; left: 35px}
#menu ul.menus { visibility: hidden; opacity: 0; height: auto; min-width: 166px; background: #fff; position: absolute; z-index: 99; color: #aaa; top: 50px; -moz-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease-in-out;}
#menu li:hover > ul.menus { visibility: visible; opacity: 1; -moz-transform: scale(1.0); -o-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0);}#menu .menus li > ul.menus { transform: translateX(100%) scale(1.0); top: 0;}
#menu a.ai,#menu a.trigger2 { padding: 0 27px 0 14px; transition: all 0.3s linear;}
#menu > li:hover > a.ai,#menu a.ai:hover { background: transparent; color: #f8a82a;}
#menu li > a.ai::after { content: "\f0d7"; font-family: FontAwesome; margin: 0 auto; width: 10px; height: 10px; line-height: 50px; position: absolute; top: 0; right: 10px;}
#menu ul.menus a { background: #fff; color: #999; border-bottom: 1px solid #f0f0f0; margin: 0; transition: all 0.2s linear;}
#menu ul.menus a:hover { background: #f8a82a; color: #fff; transition: all .1s linear;}
#menu ul.menus li { display: block; width: 100%; font-family: 'Lato'; font-size: 13px; font-weight: 400; text-transform: none;}
#menu ul.menus li a:before { visibility: hidden; opacity: 0; content: "\f061"; font-family: FontAwesome; font-size: 12px; font-style: normal; font-weight: normal; top: 0; left: 35px; margin-right: 10px; position: absolute; padding: 0; color: #fff; transition: all 0.2s ease-in-out;}
#menu ul.menus li a:hover:before { left: 10px; visibility: visible; opacity: 1;}
#menu ul.menus li:hover { width: 100%;}
#menu ul.menus li:last-child { border-bottom: none;}
#menu ul.menus li:first-child a { border-top: none;}
#menu ul.menus li:last-child a { border-bottom: none;}
#menu ul.menus > li:hover > a { background: #f8a82a; color: #fff; padding-left: 25px; transition: all 0.1s linear;}
#menu .ranpost { cursor: pointer; float: right;}
#menu .ranpost:hover { background-color: transparent!important;}
#menu ul.menusub a { background: #fff; color: #999; border-bottom: 1px solid #f0f0f0; margin: 0; transition: all 0.2s linear;}
#menu ul.menusub a:hover { background: #f8a82a; color: #fff; transition: all .1s linear;}
#menu ul.menusub li { display: block; width: 100%; font-family: 'Lato'; font-size: 13px; font-weight: 400; text-transform: none;}
#menu ul.menusub li a:before { visibility: hidden; opacity: 0; content: "\f061"; font-family: FontAwesome; font-size: 12px; font-style: normal; font-weight: normal; top: 0; left: 35px; margin-right: 10px; position: absolute; padding: 0; color: #fff; transition: all 0.2s ease-in-out;}
#menu ul.menusub li a:hover:before { left: 10px; visibility: visible; opacity: 1;}
#menu ul.menusub li:hover { width: 100%;}
#menu ul.menusub li:last-child { border-bottom: none;}
#menu ul.menusub li:first-child a { border-top: none;}
#menu ul.menusub li:last-child a { border-bottom: none;}
#menu ul.menusub > li:hover > a { background: #f8a82a; color: #fff; padding-left: 25px; transition: all 0.1s linear;}
#menu .ranpost { cursor: pointer; float: right;}
#menu .ranpost:hover { background-color: transparent!important;}<div id='menu-wrapper'> <div class='content-wrapper'> <nav id='menu'> <input type='checkbox' /> <label/> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>Static Page</a></li> <li><a class='ai' href='#'>Dropmenu</a> <ul class='menus'> <li><a href='#'>Dropmenu 1</a> <ul class='menus'> <li><a href='#'>Dropmenu 1</a></li> <li><a href='#'>Dropmenu 2</a></li> <li><a href='#'>Dropmenu 3</a></li> <li><a href='#'>Dropmenu 4</a></li> <li><a href='#'>Dropmenu 5</a></li> </ul> </li> <li><a href='#'>Dropmenu 2</a></li> <li><a href='#'>Dropmenu 3</a></li> <li><a href='#'>Dropmenu 4</a></li> <li><a href='#'>Dropmenu 5</a></li> </ul> </li> <li><a class='ai' href='#'>Dropmenu</a>
</li> <li><a class='ai' href='#'>Dropmenu</a> <ul class='menus'> <li><a href='#'>Dropmenu 1</a></li> <li><a href='#'>Dropmenu 2</a></li> <li><a href='#'>Dropmenu 3</a></li> <li><a href='#'>Dropmenu 4</a></li> <li><a href='#'>Dropmenu 5</a></li> </ul> </li> <li><a href='#'>Button</a></li> <li><a href='#'>Error</a></li> <li class='ranpost'> <a onclick='feelingLucky();'><i/>Surprise Me</a> </li> </ul> </nav> </div></div><div class='clear' />How to stylize second level dropdown menu list
You can use the following CSS:
ul.menu_top {
float:left;
width:70%;
margin: 8px 100px 0 0;
border-radius:4px;
background-color: #c4092a;
list-style-type: none;
z-index:+1;
}
ul.menu_top li {
float: left;
position: relative;
margin: 4px 2em 4px 4px;
padding: 0;
}
ul.menu_top li ul {
visibility: hidden;
position: absolute;
top:100%;
left:0px;
padding:0.5em;
list-style-type: none;
white-space:nowrap;
background-color: #c4092a;
border: 1px solid white;
border-radius:4px;
z-index:+1;
}
ul.menu_top li:hover > ul {
visibility: visible;
z-index: +2;
}
ul.menu_top li ul li {
padding: 0;
margin: 12px 4px;
float:none;
border:0;
min-width:3em;
}
ul.menu_top li ul li ul {
top:0;
left:99%;
}
ul.menu_top a {
background-color:#c4092a;
color:white;
text-decoration:none;
padding:4px;
font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
background-color:white;
color:blue;
text-decoration:none;
}
ul.menu_top li a.haschildren:after {
content:"\00A0\00A0\25BC";
}
a {
color:#0000aa;
background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
margin:0;
padding:0;
}
It's taken from my old question. The .menu_top class is used only for distinguishing between the navigation menu and another unordered lists.
JSFiddle code & result page
Can't get second level of a CSS/html dropdown menu to work
I believe what you are looking for is a flyout menu. There are plenty of tutorials on the web to do this with just CSS.
Here's the CSS I added to your code in the jsFiddle I linked to in the comment below your question.
CSS
.menu li {
position: relative;
}
.menu:hover li:hover ul {
display: block;
position: absolute;
left: 150px;
top: 0;
}
The reason the code you posted doesn't work is for a few key reasons and those are what make a CSS flyout menu work.
First, the li containing a submenu should have position: relative set as that submenu will use position: absolute. This allows you to position the submenu based on the li's position in the document when you use absolute positioning.
Once this is done, position the submenu based on the parent li. Using top: 0; left: 0; for the submenu would place it's upper left hand corner under that of the upper left hand corner of the parent li. While this aligns the top of the submenu with the top of the parent li it hides the submen. To fix this you move the submenu left the width of the parent li, left: 150px.
Second, you need to display the submenu when an li containing a menu is hovered with li:hover ul.
That's about it.
This can be a little confusing if you are not used to using the CSS position property.
Hope this helps!
**EDIT**
OP asked how to contain the submenu display to only a single submenu so that a submenu(s) of a submenu (and so on) are not displayed. Simple, use the Child Selector.
CSS
.menu:hover li:hover > ul
See the updated jsFiddle.
Dynamic CSS Dropdown Menu display submenu at same level as parent
Finally figured it out :) The following CSS does the trick.
/* Define some colors for the menu */
nav li {
background-color: #AB2524;
}
nav li:hover {
background-color: #801B1B;
}
/* Basic menu declarations */
nav {
font-size: 0; /* Remove annoying whitespace between Nav Elements (white-space-collapse got moved to CSS4) */
}
nav a {
font-size: 1rem; /* Restore Font Size */
padding: 0.5em;
display: block; /* So we can have padding */
white-space: nowrap; /* No linebreaks in the menu */
text-decoration: none;
color: white;
}
nav ul {
list-style: none; /* Remove Bullets from Lists */
padding: 0; /* remove default browser padding */
}
/* Any list item in the menu */
nav li {
position: relative; /* positioned so this is the reference. Required to be able to have the sub menu show up at the same level */
display: inline-block;
}
/* All Sub menues */
nav ul ul {
display: none; /* Hide sub menu by default */
position: absolute; /* Absolute position to push the sub menu out of the box instead of making the box larger and having the top level menu pushed down */
}
/* Show sub menu on hover */
nav li:hover > ul {
display: block;
}
/* Any sub menu below the second level (Flyout menues in the dropdown) */
nav ul ul ul {
left: 100%; /* Pushes the menu to the right of it's parent */
top: 0; /* Make it appear at the same level as it's parent */
}
/* Make the dropdown menu (first level) at least as wide as it's parent */
nav > ul > li > ul > li {
min-width: 100%;
}
No floating, no hacks, just plain CSS. Tested in Chrome, Firefox and IE11. Works flawlessly on all of them, even IE. JSFiddle Demo
How do I modify my code to add another submenu level to my CSS only, dropdown menu
You put forth level <ul> out of <li>.
The corrected code:
<!DOCTYPE html
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
/* Menu General Styles */
.menuBackground {
background-color: #164149; /* Dark Green */
color: White;
float: left: /* The float property specifies how an element should float, left, right, none, inherit (from parent)*/
text-align: left; /* To align text left*/
white-space: nowrap; /* Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered */
margin-left: 1px; /* This moves the menu bar to left align with the banner because of the Context Editor container misaligning it */
margin-top: 12px; /* This moves the menu bar up or down from the banner */
}
/* Adjust the text position in the drop-down menus to vertically align text with their icons */
.nav-text {
display: inline-block;
vertical-align: -2px;
}
/* Create a right facing black arrow for the year ranges in the files menu */
.arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid black;
display: inline-block;
padding-bottom: 5px; /* align and centre the arrow with the text */
}
/* Transform the arrow to the right orientation */
.right {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.dropDownMenu,
.dropDownMenu ul {
list-style: none; /* Lists have default markers/bullets. To remove these, add list-style: none; to <ul> or <ol>: */
margin: 0px; /* Lists have a default margin. To remove this, add margin: 0; to <ul> or <ol>: */
padding: 0px; /* Lists have a default padding. To remove this, add padding: 0; to <ul> or <ol>: */
font-weight: Normal;
font-family: Calibri;
font-size: 14px;
}
/* This is the menu list at the top level */
.dropDownMenu li {
background-color: #164149; /* Dark Green */
color: White;
position: relative; /*HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.*/
}
.dropDownMenu a {
padding: 12px 20px;
display: block;
text-decoration: none;
background-color: #164149; /* Dark Green */
color: White;
font-family: Calibri;
font-weight: Normal;
font-size: 14px;
}
.dropDownMenu a:hover {
background-color: white; /* White with black font - when top menu hovered over */
color: black;
}
/* Level 1 Drop Down Menu */
.dropDownMenu > li {
display: inline-block;
vertical-align: top;
margin-left: -4px; /* solve the 4 pixels spacing between list-items */
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu > li:first-child {
margin-left: 0;
}
.dropDownMenu > li > a {
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu > li > a:hover {
/*background-color: #164149; Dark Green */
/* color: White; */
}
/* Level 2 */
.dropDownMenu > li > ul {
text-align: left;
width: auto; /* change auto value with 200px if you want a bigger menu */
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
font-weight: normal;
font-family: Calibri;
font-size: 14px;
}
.dropDownMenu > li:hover > ul {
display: block;
background-color: #bddbdb; /* Light Blue - when menu droped down */
color: Black;
}
.dropDownMenu ul li a {
background-color: #bddbdb; /*Light Blue - when menu droped down */
color: Black;
padding: 10px 20px;
font-weight: normal;
font-family: Calibri;
font-size: 14px;
}
.dropDownMenu ul li a:hover {
background-color: #164149; /* Dark Green */
color: White;
}
/* Make arrow white when this 2nd level menu is hovered */
.dropDownMenu ul li a:hover .arrow{
border-bottom: 4px solid white;
}
.dropDownMenu > li:hover > a {
background-color: white; /* White with black font for top menu button - when child menus hovered over */
color: Black;
}
/* Level 3 */
.dropDownMenu > li > ul > li > ul {
text-align: left;
display: none;
background-color: #bddbdb; /* Light Blue - when menu droped down */
color: Black;
position: absolute;
left: 100%;
top: 0;
z-index: 9999999;
font-weight: normal;
font-family: Calibri;
font-size: 14px;
}
.dropDownMenu > li > ul > li a {
padding: 10px 20px;
}
.dropDownMenu > li > ul > li:hover > ul {
display: block;
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu > li > ul > li:hover > a {
background-color: #164149; /* Sustain dark green with white font for the second level menu selected - when child menus hovered over */
color: White;
}
/* Sustain WHITE arrow on 2nd level menu when 3nd level menu is hovered */
.dropDownMenu > li > ul > li:hover > a .arrow{
border-bottom: 4px solid white;
}
/* Level 4 */
.dropDownMenu > li > ul > li > ul > li > ul{
text-align: left;
display: none;
background-color: #bddbdb; /* Light Blue - when menu droped down */
color: Black;
position: absolute;
left: 100%;
top: 0;
z-index: 9999999;
font-weight: normal;
font-family: Calibri;
font-size: 14px;
}
.dropDownMenu >li > ul > li > ul > li a {
padding: 10px 20px;
}
.dropDownMenu > li > ul > li > ul > li:hover > ul{
display: block;
background-color: #164149; /* Dark Green */
color: White;
}
.dropDownMenu > li > ul > li > ul > li:hover > a {
background-color: #164149; /* Sustain dark green with white font for the second level menu selected - when child menus hovered over */
color: White;
}
/* Sustain WHITE arrow on 2nd level menu when 4th level menu is hovered */
.dropDownMenu > li > ul > li > ul > li:hover > a .arrow{
border-bottom: 4px solid white;
}Related Topics
Why Does Display Inline-Block Match Height of Text
How to Style an Independent Tableview Column
CSS Animation, Fadein/Fadeout 2 Images Continuously
How to Add Second Level to a Submenu in a Dropdown Navigation CSS
CSS Can't Seem to Set Height to 100% of Parent Container
iPhone Xr/Xs/Xs Max CSS Media Queries
Visual Studio 2010: Editor Stops Responding to Keyboard
Why Does Bem Often Use Two Underscores Instead of One for Modifiers
How to Pass a Parameter to a CSS Class Using Less
How to Tell CSS: Not() Selector to Affect All Child Nodes
What Is Wrong with My CSS? Active Links Not Changing Color
Nested Div Elements Wrapping with Float Left
CSS Filter: Make Color Image with Transparency White