I am trying to create a multi level flyout menu with pure CSS and HTML. I already tried this answer as well as this one, however both of them start the third level at the top of the menu, whereas I would want the third (and beyond) level to start at the same height as the parent menu item.
I tried absolute positioning and using the top property to push it down but that is no longer dynamic and would need to be changed whenever the menu changes which is not what I want.
If at all possible I would like to avoid floating the entire menu as that would break other stuff in the header and has the potential of breaking the site layout.
I would also like for the first submenu (the dropdown) to have at least the same width as the parent if all the text is shorter than the parent.
I don't need any IE Hacks since the site will only be used with the latest Chrome & Firefox versions. Code should be valid HTML5/CSS3.
nav {
font-size: 0; /* Remove annoying whitespace between Nav Elements */
}
nav a {
font-size: 1rem; /* Restore Font Size */
padding: 0.5rem;
display: block;
white-space: nowrap;
}
nav ul {
list-style: none; /* Remove Bullets from Lists */
padding: 0; /* left align the Nav */
}
nav li {
display: inline-block;
background-color: #AB2524;
}
nav li:hover {
background-color: #801B1B;
}
nav li.current, nav li.section {
background-color: #D3302E;
}
/* SubMenu Definitions */
nav li ul { /* Hide by default */
display: none;
}
nav li:hover>ul { /* Show Submenu when cursor is on parent */
display: block;
position: absolute; /* Make the menu flow out of the box and overflow the content. */
}
nav li:hover>ul>li { /* Dropdown */
display: block;
}
/* Third Level and below (4th etc.) */
nav li:hover>ul>li:hover>ul { /* Show third level */
display: inline-block;
left: 100%;
/* TODO: Make these submenues appear on the same height (from top of page) as their parent menu item rega*/
} <header id="header-box">
<div id="header">
<nav class="primary">
<ul>
<li class="current"><a href="#">Home</a></li>
<li class="link"><a href="#">Some Menu 2</a>
<ul>
<li class="link"><a href="#">SubMenu 1 - 1</a></li>
<li class="Link"><a href="#">SubMenu 1 - 2</a>
<ul>
<li class="link"><a href="#">SubMenu 2 - 1</a></li>
<li class="link"><a href="#">SubMenu 2 - 2</a>
<ul>
<li class="link"><a href="#">SubMenu 3 - 1</a></li>
</ul>
</li>
<li class="link"><a href="#">SubMenu 2 - 3</a></li>
</ul>
</li>
<li class="link"><a href="#">SubMenu 1 - 3</a></li>
</ul>
</li>
<li class="link"><a href="#">Long Menu 3</a>
<ul>
<li class="link"><a href="#">Short 1</a></li>
<li class="link"><a href="#">Short 2</a></li>
</ul>
</li>
<li class="link"><a href="#">Links</a></li>
</ul>
</nav>
</div>
</header>Can this be done without pure CSS/HTML without floating the entire thing?
Thanks in advance
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%;
} <header id="header-box">
<div id="header">
<nav class="primary">
<ul>
<li class="current"><a href="#">Home</a></li>
<li class="link"><a href="#">Some Menu 2</a>
<ul>
<li class="link"><a href="#">SubMenu 1 - 1</a></li>
<li class="Link"><a href="#">SubMenu 1 - 2</a>
<ul>
<li class="link"><a href="#">SubMenu 2 - 1</a></li>
<li class="link"><a href="#">SubMenu 2 - 2</a>
<ul>
<li class="link"><a href="#">SubMenu 3 - 1</a></li>
</ul>
</li>
<li class="link"><a href="#">SubMenu 2 - 3</a></li>
</ul>
</li>
<li class="link"><a href="#">SubMenu 1 - 3</a></li>
</ul>
</li>
<li class="link"><a href="#">Long Menu 3</a>
<ul>
<li class="link"><a href="#">Short 1</a></li>
<li class="link"><a href="#">Short 2</a></li>
</ul>
</li>
<li class="link"><a href="#">Links</a></li>
</ul>
</nav>
</div>
</header>No floating, no hacks, just plain CSS. Tested in Chrome, Firefox and IE11. Works flawlessly on all of them, even IE. ** JSFiddle Demo**