html - 滑动导航栏菜单未全宽显示

Question

我有一个滑动导航栏，当我悬停第一个选项“模块”时，它下面的菜单没有全宽显示， 另一件事我需要这个菜单出现当我点击“模块不悬停我怎么能这样做。 this is a demo

我尝试执行以下操作:

.navigation_selection ul li:hover > ul  {
  opacity:1;
  visibility:visible;
  position:absolute;
  width:500px;
  white-space :nowrap;
  background-color:red;
  overflow:visible;
 }

Answer 1

规则 .sidebar_menu 有 overflow: hidden 导致子菜单被剪掉。

要用鼠标点击切换，你可以使用 jQuery，就像这样

$(document).ready(function() {
  $(".navigation_selection > ul > .navigation_item").click(function() {
    this.classList.toggle("active");
  });
});

.iframe {
  width: 1000px;
  height: 90%;
  position: absolute;
  left: 310px;
}
.body {
  position: relative;
}
.bar {
  background-color: black;
  width: 30px;
  height: 3px;
  margin: 3px;
}
.container {
  width: 75px;
  position: absolute;
  padding: 15px 20px 15px 15px;
  color: white;
  cursor: pointer;
  background-color: #648b79;
  z-index: 100000;
  font-size: 2em;
}
.sidebar_menu {
  position: absolute;
  width: 250px;
  height: 90%;
  margin-left: 0px;
  background-color: rgba(17, 17, 17, 0.9);
  opacity: 0.9;
  transition: all 0.3s ease-in-out;
}
.x {
  right: 10px;
  font-size: 18px;
  margin-top: 10px;
  opacity: 0.7;
  cursor: Pointer;
  position: absolute;
  color: white;
  transition: all 0.3s ease-in-out;
}
.x:hover {
  opacity: 1;
}
.navText {
  width: 200px;
  font-family: 'open Sans';
  font-weight: 200;
  padding: 10px;
  20px;
  display: inline-block;
  border: solid 2px white;
  box-sizing: border-box;
  font-size: 18px;
  color: white;
  text-align: center;
  margin-top: 70px;
}
.form {
  font-weight: 800;
}
.navigation_selection ul li {
  margin: 0 0 0 20px;
  display: block;
  width: 200px;
  list-style-type: none;
  position: relative;
  font-weight: 200;
  font-family: 'open Sans';
  padding: 12px 0;
  box-sizing: border-box;
  font-size: 14px;
  color: #D8D8D8;
  border-bottom: solid 1px #D8D8D8;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.navigation_selection ul li a {
  color: #D8D8D8;
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  font-family: 'open Sans';
}
.navigation_selection ul ul {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  position: absolute;
  left: 100px;
}
.navigation_item.active > ul {
  opacity: 1;
  visibility: visible;
  position: absolute;
  width: 500px;
  white-space: nowrap;
  background-color: red;
  overflow: visible;
}
.login {
  font-size: 12px;
  color: white;
  width: 200px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border: 2px solid white;
  margin: 20px 0 20px 0;
  padding: 10px 0;
  font-size: 18px;
  font-weight: 900;
  font-family: 'open Sans';
}
.login:hover {
  background-color: white;
  color: #111;
  transition: all 0.3s ease-in-out;
}
.logout {
  font-size: 12px;
  color: white;
  width: 200px;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border: 2px solid white;
  margin: 20px 0 20px 0;
  padding: 10px 0;
  font-size: 18px;
  font-weight: 900;
  font-family: 'open Sans';
}
.logout:hover {
  background-color: white;
  color: #111;
  transition: all 0.3s ease-in-out;
}
.hide_menu {
  margin-left: -350px;
  transition: all 0.3s ease-in-out;
}
.opacity_one {
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
<div class="sidebar_menu">
  <span class="x">X</span>
  <center>
    <h1 class="navText">Navigation <span class="form">Form</span></h1>
    <center>
      <h1 class="login">
LOG IN
</h1>
    </center>

  </center>
  <div class="navigation_selection">
    <ul>
      <li class="navigation_item modules"><a href="#">Modules</a>
        <ul>
          <li class="navigation_item modules"><a href="#">Option One</a>
          </li>
          <li class="navigation_item modules"><a href="#">Option Two</a>
          </li>
          <li class="navigation_item modules"><a href="#">Option Three</a>
          </li>
      </li>
      </ul>
      <li class="navigation_item masters"><a href="#">Master</a>
      </li>
      <li class="navigation_item processing"><a href="#">Processing</a>
      </li>
      <li class="navigation_item transactions"><a href="#">Transactions</a>
      </li>
      <li class="navigation_item reports"><a href="#">Reports</a>
      </li>
      <li class="navigation_item forms"><a href="#">Forms</a>
      </li>
    </ul>
  </div>
</div>
<iframe class="iframe" name="myIframe" src=""></iframe>