管理桌面和移动设备上嵌套导航栏的悬停和单击行为 [HTML / CSS]答案

【问题标题】：Manage hover and click behaviour of nested navbar on both desktop and mobile [HTML / CSS]管理桌面和移动设备上嵌套导航栏的悬停和单击行为 [HTML / CSS]
【发布时间】：2021-04-24 09:04:06
【问题描述】：

我正在尝试修复我的页面上的嵌套导航栏的行为。主要思想是我有两个级别的<ul>-tags，在这两个级别上<li>-tags 都可以包含链接（即<a>），所以两个级别都有重定向页面的能力。悬停在顶层<li> 时，我有较低级别的显示，否则它是隐藏的。这看起来像这样：

* {
  font-family: Roboto;
}

.menu-container {
  height: 29px;
  background-color: #dcb400;
}

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu-item {
  position: relative;
}

.menu-item:hover {}

.menu-item-div {
  display: inline-block;
  margin-left: 0;
  line-height: 1.5rem;
  padding: 3.5px 9.5px;
  color: black;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  height: 22px;
}

.menu-item:hover .menu-item-div {
  background-color: black;
  color: white;
}

.submenu {
  position: absolute;
  top: 29px;
  width: auto;
  background-color: white;
  color: black;
  z-index: 100;
  padding: 0px;
  display: none;
  -webkit-box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
  box-shadow: 3px 3px 10px rgb(0 0 0 / 50%);
}

.menu-item:hover .submenu {
  display: block;
}

.submenu-item {
  display: block;
  cursor: pointer;
}

.submenu-item:hover {
  background-color: #ccc;
}

<body>
  <div class='menu-container'>
    <ul class='menu'>
      <li class='menu-item'>
        <a href='#'>
          <div class='menu-item-div'>Menu item 1</div>
        </a>
        <ul class='submenu'>
          <li class='submenu-item'>Submenu item 1</li>
          <li class='submenu-item'>Submenu item 2</li>
          <li class='submenu-item'>Submenu item 3</li>
        </ul>
      </li>
      <li class='menu-item'>
        <a href='#'>
          <div class='menu-item-div'>Menu item 2</div>
        </a>
        <ul class='submenu'>
          <li class='submenu-item'>Submenu item 4</li>
        </ul>
      </li>
      <li class='menu-item'>
        <a href='#'>
          <div class='menu-item-div'>Menu item 3</div>
        </a>
      </li>
    </ul>
  </div>
</body>

现在，这就像桌面上的魅力一样，当我将鼠标悬停在顶级菜单项时，我的子菜单就会显示出来。但是，在移动设备上，这不再起作用，因为悬停顶级菜单项的唯一（合理）方法是单击它，这会导致页面重定向到顶级<a> 目标。有没有办法扩展此代码以使其在移动设备上也能工作，即当点击移动设备上的顶级菜单项时，应该显示子菜单而不是页面重定向？

到目前为止，我在网上找到的解决方案要么与 bootstrap 之类的库有关，要么过于笨拙。我想知道是否有一种方法可以只使用 HTML 和 CSS，还是我们还必须涉及一些 js？

【问题讨论】：

请点击编辑，然后点击[<>] sn-p 编辑并在 Strackoverflow 上发布minimal reproducible example HERE，因为 jsfiddles 可能会被删除或过时。

标签： html css mobile navigationbar

【解决方案1】：

由于您没有使用顶级菜单项进行重定向，因此您可以完全放弃引用并改用 div：

<ul>
  <li>
    <div>Menu item 1</div>
    <ul> <!-- display on hover of top level li -->
      <li><a>Submenu item 1</a></li>
      ...
    </ul>
  </li>
  ...
</ul>

或者对于您给定的示例：https://jsfiddle.net/0fmbojqk/3/

【讨论】：

我是，不幸的是，这并不能解决问题，因为您刚刚删除了我的顶级菜单项周围的<a> 标签，所以在桌面上顶级项目将不再重定向