列表项和嵌套子菜单列表之间的间隙会导致悬停状态丢失

Question

我正在尝试创建一个纯 css3 的下拉菜单，使用伪元素:before和:after创建一个样式的工具提示箭头，该箭头显示在嵌套li的顶部，当您将鼠标悬停在顶级li上时，该"下拉"。

我的问题是，一旦鼠标离开悬停在li上，菜单就会消失。它不允许我向下移动鼠标并将鼠标悬停在嵌套的li上，我认为这是因为我在嵌套的li和顶级li之间有一个间隙，这个间隙用于样式化的伪元素工具提示箭头。

我

有一个我在这个jfiddle中正在做的事情的例子，它会给你更好的主意。

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

你必须填补空白。

添加透明伪元素作为第一关 li 标签的子元素，例如：

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

这是更新的 jsFiddle

Answer 2

我认为这是因为我在嵌套的 li 和顶级 li 之间有差距

在嵌套到顶级LI UL之间，更准确地说，但是是的，这当然是问题所在。因此，要修复它，您必须缩小这一差距。

在这种特定情况下，一种简单的方法可能是只给顶级LI一个border-bottom:10px solid transparent。这样，您的LI进一步向下延伸，直到绝对定位的UL开始的位置，因此不再有间隙 - 并且由于边框是透明的，因此没有视觉效果;-）

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

---

而那个选择器

#ddmenu li a:hover ul { … }

顺便说一句，没有任何意义，因为您没有将UL嵌套到这些A元素中。