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

Posted 2023-03-06

【中文标题】列表项和嵌套子菜单列表之间的间隙导致悬停状态丢失

【英文标题】：Gap between list item and nested sub-menu list causes loss of the hover state

【发布时间】：2014-04-05 03:44:44

【问题描述】：

我正在尝试创建一个纯 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;

【参考方案1】：

你必须填补空白。

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

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

Here is the updated jsFiddle

【参考方案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 元素中。

【讨论】：

啊，好的，谢谢你向我解释这个，我认为这可能是一个修复，因为我的理由是嵌套的 li 消失了，因为我也需要给他们一个悬停伪类，没有意识到这一点已经被#ddmenu li:hover ul display: block; 处理好了，我真正的问题是那个小小的伪元素间隙:)