Gap between list item and nested sub-menu list causes loss of the hover state

Question

I am trying to create a drop down menu that is pure css3, using the pseudoelements :before and :after to create a styled tooltip arrow that displays on top of the nested li's that "drop down" when you hover over the top level li.

My problem is that the menu disappears as soon as my mouse leaves the li that I am hovered over. It will not allow me to move my mouse down and hover over the nested li's and I think this is because I have a gap between the nested li's and the top level li's, this gap being used for the styled pseudoelement tool-tip arrow.

I have an example of what I am doing in this jfiddle, it will give you better idea.

http://jsfiddle.net/46andtool/dS6G7/1/

HTML

<nav>
  <ul id="ddmenu">
    <li><a href="index.html">Homepage</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Our Mission</a></li>
        <li><a href="#">The Staff</a></li>
        <li><a href="#">History</a></li>

      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Donations</a></li>
        <li><a href="#">Volunteering</a></li>
        <li><a href="#">Housing</a></li>
        </ul>
      </li>

    <li><a href="#">International</a>
      <ul>
        <li><a href="#">China</a></li>
        <li><a href="#">Japan</a></li>
        <li><a href="#">Canada</a></li>
        <li><a href="#">Australia</a></li>
        <li><a href="#">South America</a></li>
      </ul>
    </li>
    <li><a href="contact.php">Contact Us</a></li>
  </ul>
</nav>

CSS

#ddmenu {
  display: block;
  width: 100%;
  height: 80px;
  margin: 0 auto;
  padding: 0 2px;
  padding-top: 0px;
  background: #fff;
  border-radius: 1px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-left: 0px;
  border-right: 0px;
  box-shadow: 0 1px 1px rgba(20, 20, 20, 0.2);
  cursor: pointer;
  outline: none;
  font-weight: bold;
  color: #8aa8bd;
}

#ddmenu li { display: block; position: relative; float: left; font-size: 1.45em; text-shadow: 1px 1px 0 #fff; border-right: 1px solid #dae0e5; }

#ddmenu li a {
  display: block;
  float: left;
  padding: 0 12px;
  line-height: 78px;
  font-weight: bold;
  text-decoration: none;
  color: #FF0000;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#ddmenu li:hover > a { color: #565051; background: #C0C0C0; 



}


#ddmenu li:hover ul {

    display:  block;

}


#ddmenu li a:hover ul {

    display: block;
}

#ddmenu ul {
  position: absolute;
  top: 88px;
  width: 130px;
  background: #fff;
  display: none;
  margin: 0;
  padding: 7px 0;
  list-style: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}


#ddmenu ul:after:hover ul {
    display: block;

}


#ddmenu ul:before:hover ul {

    display: block;

}
/* tooltip arrow */
#ddmenu ul:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 8px;
  border-width: 1px 8px 8px 8px;
  border-style: solid;
  border-color: #fff transparent; 

}


#ddmenu ul:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: 100%;
  left: 4px;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1) transparent;  
}

#ddmenu ul li { 
  display: block; 
  width: 100%; 
  font-size: 0.9em; 
  text-shadow: 1px 1px 0 #fff;
}

#ddmenu ul li a {
  display: block;
  width: 100%;
  padding: 6px 7px;
  line-height: 1.4em;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#ddmenu ul li a:hover {


  background: #C0C0C0;
}

Answer 1

You HAVE to fill the gap.

Add transparent pseudo elements as childs of the first level's li tags for example :

#ddmenu li:after {
    content: " ";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

Here is the updated jsFiddle

Answer 2

I think this is because I have a gap between the nested li's and the top level li's

Between the UL nested into the top-level LI, to be more precise, but yes, that is of course the problem. So to fix it, you will have to close that gap.

One simple way of doing that in this specific case could be to just give the top-level LI a border-bottom:10px solid transparent. That way, your LI stretch further down until where the absolutely positioned UL start, so there is no gap any more – and since the border is transparent, there is no visual effect ;-)

http://jsfiddle.net/dS6G7/3/

---

And that selector

#ddmenu li a:hover ul { … }

doesn’t make any sense btw., because you don’t have your UL nested into those A elements.