为什么将鼠标悬停在我的水平菜单上时子菜单会消失答案

【问题标题】：why is that when hovering over my horizontal menus the submenus disappear为什么将鼠标悬停在我的水平菜单上时子菜单会消失
【发布时间】：2016-05-31 21:51:18
【问题描述】：

当我将鼠标悬停在它上面时，我有一个水平样式的菜单，并试图将鼠标悬停在它的列表项和子菜单上，菜单消失了。

#main_nav:before,
#main_nav:after {
  content: "";
  display: table;
}
#main_nav {
  zoom: 1;
  list-style: none;
  float: left;
  margin: 0px 0px 0px 350px;
}
#main_nav li {
  float: left;
  position: relative;
  padding: 0px 5px 0px 5px;
  cursor: pointer;
}
#main_nav li a {
  text-align: center;
}
#main_nav ul {
  list-style: none;
  width: 110px;
  margin: 0px;
  padding: 0px;
  border: solid;
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 1;
}
#main_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  top: -3px;
}
#main_nav > li:hover {
  border-bottom: solid red;
}
#main_nav >li:hover > ul {
  top: 30px;
}
#main_nav ul ul {
  left: 110px;
}

<ul id="main_nav">
  <li>TITLE 1
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul class="submenu">
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 2
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul class="submenu">
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 3
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 4
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 5
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 6
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>TITLE 7
    <ul>
      <li> <a href=#>SUBMENU 1</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 2</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
      <li> <a href=#>SUBMENU 3</a>
        <ul>
          <li><a href=#>SUBMENU 1</a>
          </li>
          <li><a href=#>SUBMENU 2</a>
          </li>
          <li><a href=#>SUBMENU 3</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

所以当悬停在菜单上时，子菜单会弹出，当我尝试将鼠标悬停在子菜单上时，它们消失了，这是为什么呢？

【问题讨论】：

标签： javascript jquery html css hover

【解决方案1】：

问题是ul离li太远，所以当你尝试达到hover状态时被禁用。

试试下面的 CSS：

#main_nav:before,
#main_nav:after {
  content: "";
  display: table;
}
#main_nav {
  zoom: 1;
  list-style: none;
  float: left;
  margin: 0px 0px 0px 350px;
}
#main_nav li {
  float: left;
  position: relative;
  padding: 0px 5px 0px 5px;
  cursor: pointer;
}
#main_nav li a {
  text-align: center;
}
#main_nav ul {
  list-style: none;
  width: 110px;
  margin: 0px;
  padding: 0px;
  border: solid;
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 0px;
  z-index: 1;
}
#main_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  top: -3px;
}
#main_nav > li:hover {
  border-bottom: solid red;
}
#main_nav >li:hover > ul {
  top: 30px;
}
#main_nav ul ul {
  left: 110px;
}

/* To make the first li higher */
#main_nav > li:after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 20px;
}
/* To make the li's inside ul wider */
#main_nav ul > li:after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  display: block;
  width: 50px;
  height: 20px;
}

【讨论】：

你能评论或突出显示yoru css中的代码更改吗？
哦，我 c，你减少了 #main_nav ul 中的顶部位置......看到这就是我需要它进一步下降的问题，字面上是 50 像素......
实际上你能解释一下这里的逻辑吗？
我只是用伪类“扩展”了 li's :after。尝试向我添加的选择器添加背景颜色以了解其工作原理。这是一个肮脏的修复，但它是一个解决方案。
好的……但在我不必担心“连接”子菜单的 li 之前（即当你在子菜单中创建一个虚拟 li 时）。我以前不需要这样做，现在呢？