为什么当鼠标悬停在我的水平菜单上时，子菜单消失了

Question

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

#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>

因此，当鼠标悬停在菜单上时，子菜单弹出，当我尝试将鼠标悬停在子菜单上时，子菜单消失了，这是为什么？

Answer 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;
}

为什么当鼠标悬停在我的水平菜单上时，子菜单消失了

why is that when hovering over my horizontal menus the submenus disappear

html

javascript

css

jquery

hover