How to add a 3rd level to my CSS drop down menu?
Here is a basic submenu setup: http://jsfiddle.net/Wss5A/
* {
list-style:none;
margin:0;
padding:0;
font-size:1em;
cursor:pointer;
}
#menu{
margin:3px;
}
#menu > li{ /* Top Level */
float:left;
margin-right:3px;
}
#menu > li > span{
display:block;
background:#0ac;
padding:3px 10px;
}
#menu > li:hover > span{
color:#fff;
}
#menu > li > ul{ /* Second Level */
display:none;
background:#08a;
}
#menu > li:hover > ul{
display:block;
position:absolute;
}
#menu > li > ul > li > span{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
color:#fff;
}
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#068;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
CSS 3 Level Dropdown Menu
Three steps and you have your 3 levels dropdown.
First, when hovering your 1st level, you only want to show the 2nd one. So instead of having #nav li:hover ul, you should have #nav li:hover > ul.
Second, if you want to be able to have your 3rd level at right of its parent, you will need to set its position to relative so add position:relative; in your class #nav li li
Finally, to show you 3rd level at right of its parent, you will have to add a new style:
#nav li li ul{
position:absolute;
top:0;
left:100%;
}
Here is your updated jsfiddle having a good looking 3 levels dropdown.
CSS Dropdown 3rd level Menu Issue
Here you go.
SOLUTION 1: BY MANUALLY ADDING POSITION RELATIVE TO THE LI ELEMENT
WORKING DEMO
The HTML:
<div id="menu">
<ul id="menu">
<li><span>Home</span></li>
<li><span>Test-L1</span>
<ul>
<li><span>Test-L2A</span></li>
<li class="levelThreeAlign"><span>Test-L2B</span>
<ul>
<li><span>Test-L3A</span></li>
<li><span>Test-L3B</span></li>
</ul>
</li>
<li class="levelThreeAlign"><span>Test-L2C</span>
<ul>
<li><span>Test-L3C</span></li>
<li><span>Test-L3D</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The CSS:
* {
list-style:none;
margin:0;
padding:0;
font-size:1em;
cursor:pointer;
}
#menu{
margin:3px;
}
#menu > li{ /* Top Level */
float:left;
margin-right:3px;
}
#menu > li > span{
display:block;
background:#55aa7f;
padding:3px 10px;
}
#menu > li:hover > span{
color:#fff;
}
#menu > li > ul{ /* Second Level */
display:none;
background:#55aa7f;
}
#menu > li:hover > ul{
display:block;
position:absolute;
}
#menu > li > ul > li > span{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
color:#fff;
}
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#55aa7f;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
.levelThreeAlign{position:relative;}
SOLUTION 2 : BY CREATING A CSS INHERITANCE TYPE IN THE STYLESHEET WITH A POSITION RELATIVE
WORKING DEMO
The HTML:
<div id="menu">
<ul id="menu">
<li><span>Home</span></li>
<li><span>Test-L1</span>
<ul>
<li><span>Test-L2A</span></li>
<li><span>Test-L2B</span>
<ul>
<li><span>Test-L3A</span></li>
<li><span>Test-L3B</span></li>
</ul>
</li>
<li><span>Test-L2C</span>
<ul>
<li><span>Test-L3C</span></li>
<li><span>Test-L3D</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The CSS:
* {
list-style:none;
margin:0;
padding:0;
font-size:1em;
cursor:pointer;
}
#menu{
margin:3px;
}
#menu > li{ /* Top Level */
float:left;
margin-right:3px;
}
#menu > li > span{
display:block;
background:#55aa7f;
padding:3px 10px;
}
#menu > li:hover > span{
color:#fff;
}
#menu > li > ul > li{position:relative;}
#menu > li > ul{ /* Second Level */
display:none;
background:#55aa7f;
}
#menu > li:hover > ul{
display:block;
position:absolute;
}
#menu > li > ul > li > span{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
color:#fff;
}
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#55aa7f;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
Hope this helps.
3rd level in CSS drop down menu needs smarter vertical alignment
just edit this class like this :
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:inherit; /*changed*/
margin-top:-29px; /*added*/
width:auto;
}
jsFiddle
Third level of CSS dropdown menu does not work
I believe this is not possible with pure CSS... See here. You can't reference CSS elements through CSS.
What you can do though is use Javascript and dynamically apply the styling needed. For your scenario, I set display: none to your class sub-submenu and then added a JS script so that on hover, it would find any uls inside and show them. I also moved your sub-submenu into the li.
Working jsFiddle here: http://jsfiddle.net/8kvcN/1/
CSS dropdown menu - 3rd level issue
The issue is the gap between the menus. They need to be adjacent or even overlap for this hover trick to work.
So instead of specifying
left: 100px;
do something like
left: 100%;
/* or even */
left: 99%;
This will cause the 3rd layer to be adjacent to the second layer menu, or even overlap the second slightly (for 99%), allowing you to move the mouse without any interruptions that close the menu. And you won't have to worry about the width of the menus either.
Updated fiddle: http://jsfiddle.net/tqEfW/5/
If you want to keep the gap for the look of it, you can give the 3rd layer ul a padding:
nav ul li ul li ul {
....
left: 100%;
padding-left: 4px;
}
Ad demonstrated here: http://jsfiddle.net/tqEfW/9/
That said, from a UX point of view, menus with 3 layers are very hard to use and should be avoided when possible.
Positioning 3rd level of drop down menu
#nav ul ul
{
left:100%;
top:0;
}
Instead of using the left margin use 100% positioning which will calculate the width of the higher list item.
How to add a third level to my CSS drop down menu
You need to close a few elements correctly and also the CSS for your solution is:
#topnav li li:hover ul {left: 160px; margin-top: -3em;}
Closed and corrected HTML:
<div id="topnav">
<ul>
<li><a href="index.php">Home</a></li>
<li class="last"><a href="#">Set Up</a></li>
<li class="last"><a href="#">EMR</a>
<ul>
<li class="last" ><a href="#">Out-Patient</a>
<ul>
<li><a href="#">Registration</a></li>
<li><a href="#">File Edition</a></li>
</ul>
</li>
<li><a href="InpatientAdmission.php">In-Patient</a></li>
</ul>
</li>
</ul>
</div>
Working Snippet
#topnav{ display:block; float:left; margin:0; padding:0; list-style:none; font-size:10px;//was 13 font-weight:normal; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; background-color:#000000;}#topnav ul, #topnav li{ float:left; list-style:none; margin:0; padding:0;}#topnav li a:link, #topnav li a:visited, #topnav li a:hover{ display:block; margin:0; padding:15px 20px; color:#FFFFFF; background-color:#000000;}
#topnav ul ul li a:link, #topnav ul ul li a:visited{ border:none;}
#topnav li.last a{ margin-right:0;}
#topnav li a:hover, #topnav ul li.active a{ color:#FFFFFF; background-color:#059BD8;}
#topnav li li a:link, #topnav li li a:visited{ //width:150px; float:none; margin:0; padding:7px 10px; font-size:12px; font-weight:normal; color:#FFFFFF; background-color:#000000;}
#topnav li li a:hover{ color:#FFFFFF; background-color:#059BD8;}
#topnav li ul{ background:#FFFFFF; z-index:9999; position:absolute; left:-999em; height:auto; width:170px; border-left:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;}
#topnav li ul a{width:140px;}
#topnav li ul ul {margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
#topnav li li:hover ul {left: 160px; margin-top: -3em;}<div id="topnav"> <ul> <li><a href="index.php">Home</a></li> <li class="last"><a href="#">Set Up</a></li> <li class="last"><a href="#">EMR</a> <ul> <li class="last" ><a href="#">Out-Patient</a> <ul> <li><a href="#">Registration</a></li> <li><a href="#">File Edition</a></li> </ul> </li> <li><a href="InpatientAdmission.php">In-Patient</a></li> </ul> </li> </ul></div>how to add 3rd level to this multi-level bootstrap dropdown?
Easy fix, just constrain the selector to its immediate child like this:
.dropdown-submenu:hover > .dropdown-menu, .dropdown-submenu:focus > .dropdown-menu{
display: flex;
flex-direction: column;
position: absolute !important;
margin-top: -30px;
left: 100%!important;
}
Then you can do this:
<a class="btn btn-secondary dropdown-toggle mb-1" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Style
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Level 2</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">b</a>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Level 3</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="#">c</a>
<a class="dropdown-item" href="#">d</a>
</ul>
</li>
</ul>
</li>
</ul>
Related Topics
Rotating CSS Cube on Fixed Axes
Break Line on White Space Between Words
CSS Animation on Hover Stay at Last Keyframe When Using Transform: Rotate
How to Make CSS Sourcemapping Work in Chrome with Compass (Sass)
Want to Make the Whole Page in Grayscale Except Specified Div
Flow Multi-Column Elements Left-Right Before Top-Down
Make Element Scroll Without Fixed Position Setting
Bootstrap Fullscreen Layout with 100% Height
Css3: Two Transitions with Different Timing Functions (Css3)
Sass: Set Variable at Compile Time
How to Rotate Clip Path Without Rotating Image
Two Fixed Width Full Height Columns, with Seamless Transition to Blank Space
CSS Attribute Selector: Apply Class If Custom Attribute Has Value? Also, Will It Work in IE7+
How to Animate a Svg Figure Like a Progress Bar with CSS
Why Is the Descender "Created" When Baseline Is Set to Vertical-Align