jquery - 当鼠标离开菜单时，使用 CSS 的下拉菜单消失

Question

我有一个使用 CSS 创建的下拉菜单。代码如下。

CSS

/* Navigation Menu Styles */

ul#navmenu, ul.sub1, ul.sub2  {
    list-style-type: none;
}

ul#navmenu li {
    width: 125px;
    text-align: left;
    position: relative; 
    float: left;
    margin-right: 3px;
 }

ul#navmenu a {
    text-decoration: none;
    display: block;
    width: 125px;
    height: 25px;
    padding: 5px 0px;
    padding-left: 5px;
    line-height: 25px; 
    background-color: #171717;
    color: #FFF;
    border: 1px solid #CCC;
}

ul#navmenu .sub1 a {
    margin-top: 3px;
}

ul#navmenu .sub2 a {
    margin-left: 8px;
}

ul#navmenu li:hover > a {
    background-color: #056000;              /* green */
}

ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 38px;
    left: 0px;
}

ul#navmenu li:hover .sub1 {
    display: block;
}

---

HTML

<ul id="navmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Social</a> <span class="d_arrow">&#9660;</span>
        <ul class="sub1">
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Youtube</a></li>
        </ul>
    </li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Photos</a></li>
</ul>

问题是，我想试验下拉菜单的结果。 我想通过将顶部位置从 38px 更改为 50px 来使下拉菜单远离其父菜单，例如:

ul#navmenu ul.sub1 {
    display: none;
    position: absolute;
    top: 50px;
    left: 0px;
}

但是当我将鼠标悬停在它的下拉菜单上时，它突然消失了。我知道我的代码有问题，比如将位置设置为顶部。有人可以帮我更正我的代码吗？谢谢

Answer 1

在您发表评论后，问题是当您将 top 更改为一个大数字时。 OP 问题无法重现(例如将顶部更改为 50px)。问题是当您添加 top(big number) 时，元素之间将有一个空内容，并且 :hover 将不起作用。一个快速的解决方案是将 height 添加到带有类 .d_arrow 的 img 中，这样图像就像元素之间的“桥梁”一样工作:

/* Navigation Menu Styles */

ul#navmenu,
ul.sub1,
ul.sub2 {
  list-style-type: none;
}
ul#navmenu li {
  width: 125px;
  text-align: left;
  position: relative;
  float: left;
  margin-right: 3px;
}
ul#navmenu a {
  text-decoration: none;
  display: block;
  width: 125px;
  height: 25px;
  padding: 5px 0px;
  padding-left: 5px;
  line-height: 25px;
  background-color: #171717;
  color: #FFF;
  border: 1px solid #CCC;
}
ul#navmenu .sub1 a {
  margin-top: 3px;
}
ul#navmenu .sub2 a {
  margin-left: 8px;
}
ul#navmenu li:hover > a {
  background-color: #056000;
  /* green */
}
ul#navmenu ul.sub1 {
  display: none;
  position: absolute;
  top: 100px;
  left: 0px;
}
ul#navmenu li:hover .sub1 {
  display: block;
}
/*add this rule*/
span.d_arrow {
  height: 100px;
  position: relative;
  display: block;
}

<ul id="navmenu">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Social</a>  <span class="d_arrow">&#9660;</span>
    <ul class="sub1">
      <li><a href="#">Facebook</a>
      </li>
      <li><a href="#">Twitter</a>
      </li>
      <li><a href="#">Youtube</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Events</a>
  </li>
  <li><a href="#">Contact Us</a>
  </li>
  <li><a href="#">Photos</a>
  </li>
</ul>