The gap between the list and the nested submenu list causes the freeze state to be lost.

Question

I am trying to create a drop-down menu that is pure css3 using pseudo-elements :beforeand :afterto create a stylized tooltip arrow that appears on top of the nested ones lithat “drop out” when you hover the top level li.

My problem is that the menu disappears as soon as my mouse leaves li, on which I hang. This will not allow me to move the mouse and hover over a nested one li, and I think this is due to the fact that I have a gap between the nested liand the top level li, this space is used for a stylish tip for the arrow pseudo-element.

I have an example of what I am doing in this jfiddle, this will give you a 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 need to fill in the blank.

Add transparent pseudo-elements as children of the first level 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 due to the fact that I have a gap between nested li and

top level li

Between ULnested in the upper level LI, to be more precise, but yes, this, of course, is a problem. Therefore, to correct this, you will have to close this gap.

LI a border-bottom:10px solid transparent. , LI , UL, - , ; -)

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

---

#ddmenu li a:hover ul { … }

, UL A .