Impossible CSS nav menu layout?

Question

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 &#9660;</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 &#9658;</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

Answer 1

What's happening is that when your mouse moves over the gap, it's no longer touching the li triggering the :hover state.

You can instead wrap the sub-menu uls with a parent div that's positioned correctly so that when your mouse moves between the gaps, it's still technically inside of the li which will continue to allow the menu to appear.

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 li.menu-item-has-children {
  position: relative;
}
nav li.menu-item-has-children > div {
  display: none;
  padding-top: 10px;
  position: absolute;
  top: 50px;
  left: 0;
}
nav li.menu-item-has-children:hover > div {
  display: block;
}
nav li.menu-item-has-children > div li div {
  display: none;
  position: absolute;
	top: -18px;
	left: 190px;
  padding-left: 20px;
}
nav li.menu-item-has-children > div li:hover div {
  display: block;
}

nav ul ul {
	padding: 10px;
	background-color: darkgoldenrod;
	border-radius: 10px;
}
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;
}

<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 &#9660;</a>
        <div class="test">
          <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 &#9658;</a>
                <div>
                  <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>
                </div>
            </li>
            <li><a href="#">Sub-item 5</a></li>
          </ul>
        </div>
    </li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

<p>Is it possible to have a gap between the drop down <code>#main-nav</code> and the sub-menu and still be able to select the sub-menu items (when a background color is enabled on <code>#main-nav</code>) and the sub-menu?</p>

<p>The ony way I got this to work is to extend the bottom padding on <code>#main-nav > li</code>. However, I couldn't see a way to do this and keep the <code>#main-nav</code> background from being affected?</p>

<p>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?</p>

Example: http://codepen.io/anon/pen/MYyWwv

Answer 2

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:

Updated CodePen

nav ul ul:before {
  display: block;
  height: 10px;
  width: 100%;
  left: 0;
  top: -10px;
  position: absolute;
  content: "";
}