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

【问题标题】：Dropdown menu using CSS disappears when mouse is off the menu当鼠标离开菜单时，使用 CSS 的下拉菜单消失
【发布时间】：2016-03-15 22:54:09
【问题描述】：

我有一个使用 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;
}

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

【问题讨论】：

似乎工作正常here
它对我不起作用。尝试将位置顶部更改为 100 像素。

标签： jquery html css drop-down-menu

【解决方案1】：

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

/* 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>

【讨论】：

【解决方案2】：

试试这段代码。我只是在 ul#navmenu ul.sub1 上添加一些填充顶部

Demo

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

还添加了一些东西以使设计简洁并将向下箭头放在锚标记内

<li><a href="#">Social <span class="d_arrow">&#9660;</span></a>

【讨论】：