Question

我的下拉菜单出现问题，只要我将鼠标悬停在菜单上就会消失。我对此事的任何帮助表示感谢。

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

/* Menu */
header>hide:before {
  display: block;
  content: "";
  height: 30px;
  width: 30px;
  background: black url(burger.gif) no-repeat 0 0;
  background-size: contain;
  position: absolute;
  top: 20px;
  left: 0px;
  margin: 0px;
}

header>nav {
  display: none;
  position: absolute;
  text-align: left;
  top: 50px;
  left: 0;
  width: 200px;
  height: 193px;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}

header>nav>ul {
  list-style-type: none;  
  margin: 0;
  padding: 0;
}

header>nav>ul>li {
  position: relative;
  float: none;
  bottom: 0;
  right: 0;
  background: url(menu.png) no-repeat top right;
  background-size: contain;
}

header>nav>ul>li>a {
  font-size: 1em; 
  font-weight: bold;
  text-decoration: none;
  color: white;
  margin: 0px 59px 0px 0px;
  display: inline-block;
  line-height: 48px;
  padding: 0px 24px;
  width: 60%;
  white-space: nowrap;
}

header>nav>ul>li>a:hover {
  background-color: rgb(146, 0, 0);
}

header>hide:hover + nav {
  display: block;
}

＆＃13;

<!-- Header -->
<header class="clearfix">
<!-- Menu  -->
<hide></hide>
<nav>
  <ul>
    <li>
      <a href="#">123456</a>
    </li>
    <li>
      <a href="#">123456</a>
    </li>
    <li>
      <a href="#">123456</a>
    </li>
    <li>
      <a href="#">123456</a>
    </li>
  </ul>
</nav>

＆＃13;

JSFiddle.

Answer 1

关于此问题的提示，有时请确保顶级锂物料和子清单之间没有间隙，例如，如果您为顶级锂物料指定了页边距，则可能会引起问题，请删除页边距以解决问题。

Answer 2

为了防止在您尝试将鼠标悬停在链接项上时隐藏菜单，您需要添加一个带有:hover的CSS规则，以便在您将鼠标悬停在其中一个链接上时显示该菜单。

这可以通过添加以下CSS来完成：

header>hide:hover + nav,
header>nav:hover {
        display: block;
 }

请注意我添加的header>nav:hover。这可确保将nav元素悬停在其上时可见。

这里是更新小提琴的链接：http://jsfiddle.net/gmeayqLy/1/

下拉菜单在悬停时消失

2 个答案: