当设置为响应时，导航栏的下拉部分通过其他 li 元素显示

Question

我一直在努力让我的导航栏响应。到目前为止，当屏幕变小时，我设法将所有 li 项目显示在彼此下面。但是，我的导航栏中的一些子项通常会下拉（类有 3 个子项）。当悬停其中一个具有子项的 li 时，它会通过导航栏的主要 li 项呈现它们。

我想要的是子菜单不会被悬停触发，而只有当用户点击他们的屏幕时才会触发。之后它应该显示父级下的子菜单项，然后继续其他主级。

下面的代码是全屏导航栏的工作部分。

.nav a {
text-decoration: none;
color: #fff;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
border-bottom: none;
transition: .5s background-color;
}

.nav ul {
list-style: none;
background-color: #522d54;
text-align: center;
padding: 0;
margin: 0;
display: block;
}

.nav li {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
width: auto;
line-height: 40px;
border-bottom: none;
font-size: 1em;
display: inline-block;
text-align: left;
}

.nav a:hover {
background-color: #39203b;
}

.nav a.active {
cursor: default;
background-color: #824885;
box-shadow: inset 0em -.2em #b084b3;
}

 .nav ul li {
position: relative;
display: inline-block;
}

.nav ul li ul li {
text-align: center;
padding: 0;
width: 100%;
}

.nav li ul li a {
text-align: left;
font-size: .8em;
white-space: nowrap;
padding-left: 15px;
padding-right: 15px;
display: block;
}

.nav ul li ul {
position: absolute;
display: none;
width: inherit;
}

.nav li:hover ul {
display: inline-block;
}

Answer 1

您需要使用 none 覆盖悬停显示，因为您不再希望它在悬停时显示。

@media screen and (max-width: 650px) {
  .nav li:hover ul {
    display: none;
  }
}

然后您需要使用 javascript 或 jquery 将 class 添加到点击的 li:

jQuery 可能类似于（假设您在带有子菜单的项目上有 class 'sub'）：

$('.nav li.sub').click(function() {
  $(this).toggleClass('open-sub-menu');
});

新 class 是：

.nav li.sub.open-sub-menu ul {
  position:relative;
  display:block;
}

Answer 2

非常感谢你真的成功了。我是一个完整的 jquery/js 菜鸟，所以这非常有帮助。不知何故，我花了 15 分钟才弄清楚我没有链接到 head 标签中的 jquery。

对于和我有同样问题的人，请务必将其放在 html 的标签之间。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

当设置为响应时，导航栏的下拉部分通过其他 li 元素显示

Dropdown part of navbar displaying through other li elements when set to responsive

html

css

html-lists

navigationbar

responsive-design