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

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;
}

Here is the updated jsFiddle

Answer 2

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

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

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

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

---

还有那个选择器

#ddmenu li a:hover ul { … }

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