子菜单无法在屏幕调整大小(和意外行为)上正确呈现

Question

我的垂直导航有5个链接.在屏幕调整大小时,我的垂直导航变为水平导航,其中三个(显示5个链接)显示,另一个链接menu显示另外两个剩余链接.

出于某种原因,在屏幕调整大小时,当menu显示时,列表内容已经显示,然后当单击菜单时,即使您没有悬停在其上,它也会保留悬停属性.这是视觉效果:

1.在屏幕上调整大小,它看起来像这样:

2.将鼠标悬停在菜单上时:

哪个可以.我只希望在单击菜单链接时显示链接,而不是悬停在上面.但我不明白为什么要说menu两个li空格.

3.点击菜单时:

还行吧.但是,请注意菜单li现在的大小如何.

4.单击menu然后将鼠标从链接移开:

如上所述,我不知道是什么导致了这些问题.

这是我目前的做法:

$(document).ready(function() {
  $(".show").click(function() {
    $(".subMenu").toggleClass("active");
    return false;
  });
});

.site-wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}


/* make divs appear below each other on screen resize */

@media screen and (max-width: 540px) {
  .site-wrapper {
    flex-direction: column;
  }
}

ul.subMenu {
  display: none;
}

.subMenu.active {
  display: flex;
  flex-direction: column;
}

li.show {
  display: none;
}

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.logo-holder {
  text-align: center;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  width: 100%;
  /* make div span div */
  padding: 0px;
}

.nav ul li {
  list-style-type: none;
}

.nav li:hover a {
  color: #f4f3f3;
}

.active {
  text-align: left;
  padding-left: 15px;
  text-decoration: none;
  background-color: #333;
  color: #f4f3f3;
}

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .socials {
    display: none;
  }
  .hide {
    display: none;
  }
  .show {
    display: inline-block !important;
  }
  .nav ul li {}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-wrapper">
  <div class="nav-container">
    <div class="logo-holder">
      <img class="user-select-none" src="images/temp-logo.jpeg" alt="temp" />
    </div>
    <div id="navigation-div">
      <nav class="nav">
        <ul>
          <li><a class="nav-link active" href="">Test 1</a></li>
          <li><a class="nav-link " href="">Test 2</a></li>
          <li><a class="nav-link" href="">Test 3</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 4</a></li>
          <li class="hide"><a class="nav-link hide" href="">Test 5</a></li>
          <li class="show"><a class="nav-link" href="">Menu</a>
            <ul class="subMenu">
              <li><a class="nav-link" href="">Test 4</a></li>
              <li><a class="nav-link" href="">Test 5</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</div>

Answer 1

解释：

你有太多事情搞砸了。最需要注意的是子元素继承自主元素。例如，如果我们有以下 HTML：

<ul id="main_menu">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>
         <ul id="sub_menu">
             <li>sub list item 1</li>
         </ul>
    </li>
</ul>

还有这个CSS：

#main_menu li {/* This styling will also be applied to sub_menu!! */
    color: red;
}

因此，如果您只想应用于主菜单下的直接 li> ，请使用这意味着仅直接元素，如下所示：

#main_menu > li {/* This styling will be applied only to direct li, sub_menu li will not take this styling */
    color: red;
}

解决问题：

1- 添加 !important 到子菜单：

ul.subMenu {
    display: none !important;
}

2-评论或删除此行：

.nav li:hover a {
    /* color: #f4f3f3; */
}

3-您的子菜单继承了主菜单中一些不需要的样式。添加这些应该可以为您解决问题：

.subMenu a.nav-link {
    background-color: #f4f3f3;
    color: #333;
}
.subMenu a.nav-link:hover {
    background-color: #333;
    color: #f4f3f3;
}
.subMenu.active {
    display: block !important;
}

这是一个演示。