Trying to add a CSS Sub Sub Menu
or you can use this which is a simple example of nested menu.(unlimited). jsfiddle
you should just adjust its size and color.
HTML
<ul class="menu">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a>
<ul>
<li><a href="#">sub item1</a></li>
<li><a href="#">sub item2</a></li>
<li><a href="#">sub item3</a>
<ul>
<li><a href="#">sub sub item 1</a></li>
<li><a href="#">sub sub item 2</a>
<ul>
<li><a href="">sub sub sub item1</a></li>
<li><a href="">sub sub sub item2</a></li>
<li><a href="">sub sub sub item3</a>
<ul>
<li><a href="">yes why not?</a></li>
<li><a href="">you can still continue</a></li>
<li><a href="">if you want</a></li>
<li><a href="">you can try.(-;</a></li>
</ul>
</li>
<li><a href="">sub sub sub item4</a></li>
</ul>
</li>
<li><a href="#">sub sub item 3</a></li>
</ul>
</li>
<li><a href="#">sub item4</a></li>
</ul>
</li>
<li><a href="#">item3</a></li>
</ul>
CSS
ul.menu{
position:relative;
}
ul.menu li{
padding:0;
margin:0;
position:relative;
border:1px solid;
}
ul.menu > li{
float:left;
padding:10px 45px;
}
ul.menu > li li{
padding:7px;
}
ul.menu , ul.menu ul{
list-style:none;
padding:5px;
margin:0;
overflow:visible;
}
ul.menu li:hover > ul{
display:block;
}
ul.menu ul{
display:none;
position:absolute;
left:-6px;
top:37px;
width:160px;
}
ul.menu ul:hover{
display:block;
}
ul.menu ul ul{
left:158px;
top:0;
}
Trying to add sub-menu to css
This will get you started, though it's far from perfect. As Zeta pointed out, without the child combinator, making a deeply nested menu is not only difficult, but it also results in bad code.
What you need to do is make sure you know exactly what each of your selectors is targeting. You want your second and third tier lis to behave differently, so you need to be certain that your selector for the second isn't also effecting the third.
Literally all that I did to solve your problem was apply the child combinator all over the place on the code you already had, as I knew you were writing code for first and second tier menu items. After that, I tacked on a simple selector to target third tier items and had a working menu.
Were I you, I'd go back through your code and make sure you know exactly what your selectors are targeting, then rewrite your CSS. It's not too hard to do, and it can result in surprisingly little code for very complex nested menus.
html (for just a third tier menu item)
...
<!-- the rest of the menu -->
<li>
<a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a>
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<!-- the rest of the menu -->
...
css (for just the third tier)
.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }
And just for a few examples of how to select different tier menus and items:
css (to target the 'header items')
.menu > ul > li { }
css (to target the first dropdown)
.menu > ul > li > ul { }
css (to target the first dropdown items)
.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }
css (to target the submenu to a dropdown item)
.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }
css (to target the submenu item of a dropdown item)
.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }
What we can gather from the above code is that you don't want to stop doing using the child combinator until you're at the last tier of your menu. In general, menu ul[n] li, where I'm using pseudocode to represent n number of uls, will target any li deeper than n depth in your menu. So in your case, it's fine to use .menu ul ul ul li as the third tier is the last one. But you wouldn't want to use .menu ul ul li to write style that's meant just for the first dropdown, as that selector also targets the third, fourth, and so on depth as well.
Just for completeness, the bare minimum to get a working deeply nested menu is done by thinking like this:
You want anything after the first ul to start off as hidden. So you can do:
.menu ul ul { visibility: hidden; }
This hides any ul that is nested within another ul. So it hits all of our submenus. And it only applies to lists within our menu.
Then you want each submenu to be visible when you're hovering over its parent's link. We can handle all of our submenus with a single selector, I think:
.menu li:hover > ul { visibility: visible; }
That should be general enough to apply to every level of a menu. Reading right to left, we make the ul visible when we're hovering over an li that is its direct parent. And, like usual, this only applies to an li that is within our menu.
Of course, you could use a, too, if you wanted.
CSS Menus are a great time to think and learn about CSS efficiency. Once you have a working menu, see if you can optimize it! The tags I posted here might not be the quickest; I just thought of them off the top of my head. I'll leave it to you to find the best selectors to use.
And that's really the basics of complex nested CSS menus. Hope it helps.
Add Sub-Sub-Menus to a CSS menu with Sub-Menus
Here is how I would approach what you are looking for: http://jsfiddle.net/Dg3yQ/26/
I took some liberties on revising the CSS. The revised CSS reduced the code by a couple hundred characters and I believe it accomplishes what you intended. I hope this helps.
EDITED: Added a streamlined code example with comments to this answer on how these sub menus can be accomplished.
#nav { list-style:none inside; margin:0; padding:0; text-align:center; }
#nav li { display:block; position:relative; float:left; background: #006633; /* menu background color */ }
#nav li a { display:block; padding:0; text-decoration:none; width:200px; /* this is the width of the menu items */ line-height:35px; /* this is the hieght of the menu items */ color:#ffffff; /* list item font color */ } #nav li li a {font-size:80%;} /* smaller font size for sub menu items */ #nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */
/*--- Sublist Styles ---*/#nav ul { position:absolute; padding:0; left:0; display:none; /* hides sublists */ }
#nav li:hover ul ul {display:none;} /* hides sub-sublists */
#nav li:hover ul {display:block;} /* shows sublist on hover */
#nav li li:hover ul { display:block; /* shows sub-sublist on hover */ margin-left:200px; /* this should be the same width as the parent list item */ margin-top:-35px; /* aligns top of sub menu with top of list item */ }<ul id="nav"> <li><a href="#">Main Item 1</a></li> <li><a href="#">Main Item 2</a> <ul> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">SUB SUB LIST »</a> <ul> <li><a href="#">Sub Sub Item 1</a> <li><a href="#">Sub Sub Item 2</a> </ul> </li> </ul> </li> <li><a href="#">Main Item 3</a></li></ul>Sub menus in css
I added a background color to the 'New' menu so you could see the positoning
#menucontainer { border: #cccccc 1px solid; color: #333333; font-weight: bold; height: 35px; width: auto; float: left; margin-top: 0px;}ul#menu { font-size: 1.1em; padding: 0; margin: 0; border: none; position: relative; float: right; z-index: 10; width: auto;}ul#menu li { display: inline-block; list-style: none; position: relative; width: 140px; text-align: center; border: none; border-left: 1px solid #cccccc; height: 35px;}ul#menu li .first { border-left: 0 !important;}ul#menu li a { margin: 5px 20px 5px 29px; padding: 0; font-weight: bold; text-decoration: none; line-height: 2.6em; color: #0090d4;}ul#menu li a:hover { color: #005a8b; text-decoration: none;}ul#menu li a:active { color: #cd0a0a;}ul#menu li .selected a { background-color: #ffffff; color: #000000;}ul#menu ul.subMenu { margin-top: 15px; right: 0px; left: 0px; position: absolute; background-color: red; border: #cccccc 1px solid; padding: 0; width: 142px; display: none;}ul#menu li:hover ul.subMenu { display: block;}ul#menu ul.subMenu li { display: block !important; width: 140px; padding: 0; margin: 0; border: none !important;}ul#menu ul.subMenu li:hover { background-color: #eeeeee;}ul#menu ul.subMenu li a { padding: 5px !important; margin: 0 !important; text-align: left !important;}ul#menu ul.subMenu li:hover ul.navDeviceSearch { display: block;}ul#menu ul.subMenu ul.navDeviceSearch { width: 130px; height: 50px; padding-left: 5px; padding-right: 5px; text-align: left; margin-top: -20px!important; display: none;}ul#menu ul.subMenu li ul.navDeviceSearch li { font-weight: bold; display: block; width: 128px; color: #cccccc; font-style: italic; top: 0px; vertical-align: top; background-color: lightgreen; left: 139px!important; position: relative;}
ul#menu ul.subMenu li ul.navDeviceSearch li:hover { background-color:orange;}<div id="menucontainer" class="ui-corner-all ui-widget-header"> <ul id="menu"> <li class="first">main 1 <ul class="subMenu"> <li>SubMenu</li> <li>SubMenu</li> </ul> </li> <li>main 2 <ul class="subMenu"> <li>SubMenu</li> <li>SubMenu</li> <li>SubMenu</li> <li>SubMenu</li> </ul> </li> <li>main 3 <ul class="subMenu"> <li>SubMenu</li> <li>SubMenu</li> <li>SubMenu</li> <li>SubMenu</li> </ul> </li> <li>main 4 <ul class="subMenu"> <li>SubMenu</li> <li>SubMenu</li> <li>SubMenu</li> <li>SubMenu</li> <li>SubMenu <ul class="navDeviceSearch"> <li>NEW</li> <li>NEW</li> </ul> </li> </ul> </li> </ul></div>How to add sub-menu (css) under actual sub-menu in WordPress
You can simple drag and drop the sub-menus under the sub-menu. Sub-menus can be pages, custom-link and anything from left side of menu page. And then css of a accordingly.
the series would be:
The science
sub-menu(of science)
sub-menu a
sub-menu b
sub-menu b
Accreditation
sub-menu(of Accreditation )
sub-menu c
sub-menu e
sub-menu f
and so on
and if you want css then tell me.
add this css in your theme and css accordingly:
.sub-menu-corel .sub-menu {
display: none;
position: absolute;
top: 100%;
width: 180px;
background: #fff;
border: 1px solid #ccc;
padding: 10px 0;
z-index:999;
}
.sub-menu-corel .sub-menu li{
width:100%;
}
.sub-menu-corel .sub-menu li a{
display:block;
width:100%;
color:#111;
}
.sub-menu-corel .sub-menu li a:hover{
color:#111;
}
this is updated css
How To Create SubMenu in Drop Down (HTML/CSS)
I'm not quite sure what kind of result are you expecting but one way to do this is to add a class to the submenu li and watch when it's hovered, after which you show the submenu. Like this:
#menu { background: #343434; color: #eee; height: 35px; border-bottom: 4px solid #eeeded}
#menu ul,#menu li { margin: 0 0; padding: 0 0; list-style: none}
#menu ul { height: 35px}
#menu li { float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 -1px 0 #000; border-right: 1px solid #444; border-left: 1px solid #111; text-transform: uppercase}
#menu li:first-child { border-left: none}
#menu a { display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #eee;}
#menu li:hover > a,#menu li a:hover { background: #111}
#menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menu label { font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center}
#menu label span { font-size: 12px; position: absolute; left: 35px}
#menu ul.menus { height: auto; width: 180px; background: #111; position: absolute; z-index: 99; display: none; border: 0;}
#menu ul.menus li { display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menu li:hover ul.menus { display: block}
#menu a.home { background: #c00;}
#menu a.prett { padding: 0 27px 0 14px}
#menu a.prett::after { content: ""; width: 0; height: 0; border-width: 6px 5px; border-style: solid; border-color: #eee transparent transparent transparent; position: absolute; top: 15px; right: 9px}
#menu ul.menus a:hover { background: #333;}
#menu ul.menus .submenu { display: none; position: absolute; left: 180px; background: #111; top: 0; width: 180px;}
#menu ul.menus .submenu li { background: #111;}
#menu ul.menus .has-submenu:hover .submenu { display: block;}<nav> <ul id='menu'> <li><a class='home' href='/'>Home</a></li> <li><a class='prett' href='#' title='Menu'>Menu</a> <ul class='menus'> <li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a> <ul class='submenu'> <li><a href="#" title="Sub Menu">Sub Menu</a></li> <li><a href="#" title="Sub Menu">Sub Menu 2</a></li> <li><a href="#" title="Sub Menu">Sub Menu 3</a></li> </ul> </li> <li><a href='#' title='Dropdown 2'>Dropdown 2</a></li> <li><a href='#' title='Dropdown 3'>Dropdown 3</a></li> </ul> </li> </ul></nav>Related Topics
How to Expand a Cropped Image into a Box
Horizontal Navigation with Logo in Middle
Fullwidth and Multiple Columns Using Flexbox
Min - Height with Child Set to Position:Absolute
Prevent Background Image Flashing on Change
Fill Parent Container and Reduce Image Resolution with Next/Image
Easiest Way to Convert Polygon Clip-Path to Microsoft Edge Supported "Clippath" Svg
Google Chrome Bug - Overflow:Auto | Scroll Doesn't Work
Sass Replicating Nested Selector
Why Image-Path Is Not Resolved in SCSS
Bullet Point Background Color Attribute? CSS
Efficient Way to Place Orphaned Element(S) at Top/Beginning Using CSS Flexbox
What Exactly Happens When a Browser Doesn't Support Media Queries
Can The CSS: Part Pseudo-Selector Be Used to Style Nested Web Components
How to Style: Root Without !Important Using Proper Specificity