I'm trying to setup a nav menu structure to allow styling in almost any way you can imagine. However I've come across one scenario that I just can't get to work.
The top-level menu is a standard horizontal menu, with separate background colors set on the unordered list, and list-item tags. The sub-menu also has separate background colors for the unordered list and list-item tags.
The problem is that I want a gap between the top-level menu and sub-menu but unless I add an extra bottom padding to the top-level menu list-items it just won't work, as adding extra padding affects the height of the unordered list which is visible due to the top-level menu background-color.
Now, if I didn't want or care about the background color on the top-level menu then we don't have a problem. But is it possible to retain the background color and make the menu work as expected?
Here is the menu HTML:
<nav id="navigation" class="wf-td">
<ul id="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="menu-item-has-children">
<a href="#">Drop Down ▼</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li class="menu-item-has-children">
<a href="#">Sub-item 4 ►</a>
<ul>
<li><a href="#">Sub-sub-item 1</a></li>
<li><a href="#">Sub-sub-item 2</a></li>
<li><a href="#">Sub-sub-item 3</a></li>
<li><a href="#">Sub-sub-item 4</a></li>
<li><a href="#">Sub-sub-item 5</a></li>
</ul>
</li>
<li><a href="#">Sub-item 5</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
And the CSS:
p {
font: normal normal 300 16px/ 26px Helvetica, Arial, Verdana, sans-serif;
padding: 0 10px;
}
#navigation {
background-color: tan;
border-radius: 10px;
padding: 20px;
height:200px;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display:block;
background-color: darkgoldenrod;
border-radius: 10px;
}
nav ul li a {
display: block;
margin: 5px;
padding:6px 8px;
text-decoration:none;
font: normal normal 300 17px/ 26px Helvetica, Arial, Verdana, sans-serif;
color: #fff;
border-radius: 10px;
background-color: goldenrod;
}
#main-nav > li {
display: inline-block;
position: relative;
z-index: auto;
vertical-align: middle;
margin-left: 10px;
margin-right: 10px;
padding: 2px 0;
/*padding-bottom: 10px;*/
}
/* Dropdown Styles */
nav ul ul {
position: absolute;
top:60px;
left:auto;
visibility: hidden;
opacity: 0;
padding: 10px;
background-color: darkgoldenrod;
border-radius: 10px;
}
nav ul ul ul {
position: absolute;
top:-18px;
left:221px;
border-radius: 5px;
}
nav li.menu-item-has-children:hover > ul {
display: list-item;
visibility: visible;
opacity: 1;
}
nav ul ul li {
position: relative;
width:190px;
line-height: 20px;
}
nav ul ul li a {
font-size: 15px;
border-radius: 5px;
}
nav ul ul li a:hover {
background-color: tan;
}
Is it possible to have a gap between the drop down #main-nav and the sub-menu and still be able to select the sub-menu items (when a background color is enabled on #main-nav) and the sub-menu?
The ony way I got this to work is to extend the bottom padding on #main-nav > li. However, I couldn't see a way to do this and keep the #main-nav background from being affected?
By the same token is it possible to have a gap between the sub-menu and sub-sub-menu and retain the background color on the sub-menus?
I have setup the menu here: http://codepen.io/dgwyer/pen/emJwQP
I managed to make it work using a pseudo absolute element before the sub ul. Keep the submenu at 60px top, so it will place correctly, and set the pseudo to -10px top, so it will fill the created gap:
nav ul ul:before {
display: block;
height: 10px;
width: 100%;
left: 0;
top: -10px;
position: absolute;
content: "";
}