Displaying Third Tier Submenus Properly with CSS Only Menu

Displaying third tier submenus properly with css only menu

There are 3 issues here.

1. You are displaying all <ul/> elements that exist below a hovered <li/>.
   Change #navsection ul li:hover ul to #navsection ul li:hover > ul to select the immediate child only

2. You are setting the position of each drop level to be the same.
   Try adding something like #navsection ul ul ul { top: 1em; left: 140px; }, this will stop the grandchild obscuring the child.

3. You're title attributes are negatively affecting your navigation.
   I'd remove them entirely as they do not add any real beneficial information to the link and obscure the menu items making the navigation difficult to use.

I hope that helps :)

Third Tier Sublist in Drop Down Menu Won't Display on Hover

First, the CSS which causes the third tier to appear is not correct:
#menu .has-sub .has-sub:hover > ul {
display: block;
} In this code the '>' targets an ul which is a direct child of a .has-sub:hover element - in your HTML the 3rd tier ul is not a child of the li.has-sub element. You could change the > to a +, which means it targets an ul element directly following the li.has-sub element which for this code causes the third tier to appear. The next problem is that the third tier items appear directly underneath the second tier, so they need to be moved somewhere - see the example code.

http://codepen.io/nztim/pen/GpbqK

Now you need to get the menu to stay visible when you hover over the third tier, but I'll leave that to you, all the best :)

CSS Menu does not display the sub-menus

You can try this css, I've changed it a bit:

.menu {
  z-index: 100;
  width: 230px;
  position: relative;
  display: block;
  background: #fff;
}

.menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu ul li{
  display: block;
  border-bottom: #ccc 1px solid;
  position: relative;
}
.menu ul li a{
  display: block;
  color: #000;
  padding: 5px;
}

.menu ul li.active > a,
.menu ul li a:hover{
  text-decoration: none;
  color: #fff;
  background: #ccc;
}

.menu ul li .submenu{
  display: none;
  position: absolute;
  width: 100%;
  top: 0;
  left: 100%;
  background: #ddd;
}

.menu ul li:hover > .submenu{
  display: block;
}

If I use .menu ul li:hover > .submenu that is generated correctly, but
not displayed in the 3 or 4 menu levels.

That will work, just add .submenu class on your .submenu2 or .submenu3

Here's the sample code. Just edit it to suit your needs or design.

html,*{margin: 0;padding: 0;font-size: 16px;}
body{background: #eee;}a{text-decoration: none;}.menu {  z-index: 100;  width: 230px;  position: relative;  display: block;  background: #fff;}
.menu ul{  margin: 0;  padding: 0;  list-style: none;}.menu ul li{  display: block;  border-bottom: #ccc 1px solid;  position: relative;}.menu ul li a{  display: block;  color: #000;  padding: 5px;}
.menu ul li.active > a,.menu ul li a:hover{  text-decoration: none;  color: #fff;  background: #ccc;}

.menu ul li .submenu{  display: none;  position: absolute;  width: 100%;  top: 0;  left: 100%;  background: #ddd;}
.menu ul li:hover > .submenu{  display: block;}

<div class="menu">      <ul>        <li><a href="#">Sample</a></li>        <li class="active"><a href="">Sample</a>          <ul class="submenu submenu1">            <li><a href="#">Sub</a></li>            <li><a href="#">Sub</a></li>            <li class="active"><a href="">Sub</a>              <ul class="submenu submenu2">                <li><a href="#">Sub</a></li>                <li><a href="#">Sub</a></li>                <li><a href="#">Sub</a></li>                <li class="active"><a href="">Sub</a>                  <ul class="submenu submenu3">                    <li><a href="#">Sub</a></li>                    <li><a href="#">Sub</a></li>                    <li><a href="#">Sub</a></li>                    <li><a href="#">Sub</a></li>                    <li class="active"><a href="">Sub</a></li>                  </ul><!--// Inner Child 3 -->                </li>                <li><a href="#">Sub</a></li>              </ul><!--// Inner Child 2 -->            </li>            <li><a href="#">Sub</a></li>            <li><a href="#">Sub</a></li>          </ul><!--// Inner Child 1 -->        </li>        <li><a href="#">Sample</a></li>        <li><a href="#">Sample</a></li>        <li><a href="#">Sample</a></li>      </ul>    </div><!--// end .menu -->

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

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.

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 dynamic sub-menu is not showing properly

change third level html structure to be in one ul element, so use this code

<ul style="display: block;">  <li>    <a href="javascript:void(0)">      <strong>abcd</strong>    </a>  </li>  <li>    <a href="javascript:void(0)">      <strong>abcd 2</strong>    </a>  </li></ul>

Third-Level Menu Items Are Always Showing

I figured this solution out:

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover     ul{
display:block;
}

Third level of CSS menu doesn't display properly

I think you want this : See this fiddle

I added two lines of CSS in the end with playing with parent selectors :

#menuwrapper > ul > li:hover > ul { display: block; left: 0; }
#menuwrapper > ul > li:hover > ul ul { display: none; }

---

Related Topics