javascript - 为什么当鼠标悬停在水平菜单上时，子菜单会消失

标签 javascript jquery html css hover

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

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

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

最佳答案

问题是 ul 距离 li 太远，因此当您尝试到达时，悬停状态被禁用。

尝试以下 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;
}

关于javascript - 为什么当鼠标悬停在水平菜单上时，子菜单会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37556207/

上一篇：javascript - Angular Chart js 饼图不起作用

下一篇：javascript - 使用AngularJS select选择两组信息

相关文章：

javascript - 在javascript中覆盖css类

php - 在 php 和 jquery 中添加行时出错？

javascript - 是否有使用扩展器的 knockout.js 的屏蔽输入插件？

javascript - MVC 区域的 Angular JS 路由问题

javascript - 在哪里实现 ng-click 函数、 Controller 或指令？

javascript - 自定义背景图片，如何获取文件路径并设置

javascript - 如何使用 SVG 和 Javascript 创建可点击的形状？

javascript - 如何在 for 循环中使用 return ？

javascript - 添加分钟并打印

javascript - 更改 youtube 视频 iframe 播放器内容的问题

©2024 IT工具网  联系我们