Third level display on CSS-only drop-down menu

The Problem:
When I try to switch to another third level item, the item above closes, then the containing list closes, too, preventing me from hovering over the one to which I wanted to move. Is there a way with only CSS to keep the second level item open when hovering over the third level items?

The HTML:

<nav id="globalnav">
   <ul>
      <li>
         <a href="#">Level 1 link1</a>
      </li>
      <li>
         <a href="#">Level 1 link2
         </a>
         <ul>
            <li>
               <a href="#">Level 2 sub 1 link1</a>
            </li>
            <li>
               <a href="#">Level 2 sub 1 link2</a>
            </li>
         </ul>
      </li>
      <li>
         <a href="#">Level 1 link3
         </a>
         <ul>
            <li>
               <a href="#">Level 2 sub 2 link1</a>
               <ul>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 1 link1</a>
                  </li>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 1 link2</a>
                  </li>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 1 link3</a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#">Level 2 sub 2 link2</a>
               <ul>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 2 link1</a>
                  </li>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 2 link2</a>
                  </li>
               </ul>
            </li>
            <li>
               <a href="#">Level 2 sub 2 link3</a>
            </li>
            <li>
               <a href="#">Level 2 sub 2 link4</a>
               <ul>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 4 link1</a>
                  </li>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 4 link2</a>
                  </li>
                  <li>
                     <a href="#">Level 3 sub 2 sub-sub 4 link3</a>
                  </li>
               </ul>
            </li>
         </ul>
      </li>
      <li>
         <a href="#">Level 1 link4</a>
      </li>
   </ul>
</nav>

The CSS:

#globalnav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#globalnav li {
	position: relative;
}
#globalnav a {
	text-decoration: none;
	background-color: #003333;
	color: #CCC;
	display: block;
	padding: 5px;
}
#globalnav ul ul{
	position:absolute; /*display:none*/
	top:-9999em;
}
#globalnav ul ul a    {
	padding-left: 2em;
	background-color: #F96
}
#globalnav ul ul ul a    {
	padding-left:4em;
	background-color:#b3f
}
#globalnav li:hover > ul {
	position:static; /*display:block*/
	top:100%;
}
#globalnav li:hover ul a{
	background-color: #aff;
}
#globalnav ul ul li:hover ul a{
	background-color:#FF9
}
#globalnav ul ul ul li:hover a{
	background-color:#ea2;
}

Hey,

This gives good information on the selectors needed to achieve 3 level drop downs.
http://htmldog.com/techniques/dropdowns/

i got this so far
http://codepen.io/pdxSherpa/pen/GgoRaE

but not satisfied yet w/how i have aligned the 3rd drop out level
need more work but is this what you mean? you may also want to add superfish?

Thanks markbrown, I looked at the link you provided. I should have been clearer. I’m making this menu responsive; in the mobile display everything will be 100% width, so there will be very little to no room for the third level items to appear to the side, so they would drop down vertically. What happens is when you get to the second second-level item, the inner list drops down, but as soon as you try to hover over the fourth second-level item, the second one collapses and you’ve overshot the bottom edge of the first-level item. I’m trying to get it so the first-level item stays open and tall enough, without hard-coding a height.

Hi pdxSherpa, thanks for sending the codepen. As I explained to markbrown4, I want to make the menu items 100% width for a small screen, so there wouldn’t be room for the third level list to appear to the side. I’m trying to find a CSS-only way to get it to drop down on hover or tap. I’ve just been browsing and found some possible solutions using a checkbox, but not sure I totally understand them.

Hi,

This is my take on dropdown menus these days (ignore the colours :smile: ).

I prefer to use click rather than hover because it is more accessible and easier to use and works well on mobile. It uses the superclick plugin (based on superfish) and a small script to toggle the hamburger menu for mobile.

Media queries change the display to 100% for smaller screens so that is is relatively easy to navigate.

I find this the most successful way to do dropdowns these days.

Thanks PaulOB, I actually like the colors you used :blush:, and thanks for explaining that it is the most successful way to do the dropdowns. I’d started looking at Superfish, as per pdxSherpa’s suggestion, and it’s great to see the superclick plugin you added. It seems some amount of JavaScript (whether jQuery or plain JavaScript) is still necessary to get the functionality we want, but if that’s the best way to go, then that’s how I’ll approach this one.

Thanks everyone for your suggestions!

d’ho! sorry totally misunderstood!

nice menu. Thank you!

i have to ask about the display table bit.
this is the first time i have seen it in a menu. is that a personal ref? i have not yet used the display:table property. not sure how (so feel free to point me to a tutorial if you have one in mind) or how it would improve from the regular menus.
thx
D

Display table is basically using <table>. So it emulates a table.

The other properties relating to that (display:table-cell, display:table-row (and others)) are the same as <td> and <tr>.

Just open and close the window on my demo and see how it flies. Try that with any other menu apart from flexbox and you will be sorely disappointed. It also avoids the text size issue between browsers and platforms as the text sits in free space so browsers won’t wrap to another line where you have used padding + text to equal a width.

I use display:table and table-cell all the time as they are so robust and so easy to use and you get equal columns without the headache (not to mention equal distribution). There are caveats and in some circumstances it’s not the best choice (position:relative on table-cells is undefined in the specs and may not work) but as another tool in the toolbox its a must.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.