Question

我试图从可折叠的侧边栏菜单创建弹出子菜单，但弹出菜单不会完全显示，因为侧边栏的宽度太小。如何在不改变侧边栏宽度的情况下获得弹出窗口？

<div class="sidebar_menu">
  <i class="fa fa-times">x</i>
  <a id="logo_image" href="index.html"></a>
  <ul class="navigation_selection">
    <li class="nav_item"><a class="current"href="index.html">Home</a></li>
    <li class="nav_item" id="work"><a href="#">Work</a>
      <ul id="sub_menu">
        <li class="nav_item drop_item"><a href="#">Residential</a></li>
        <li class="nav_item drop_item"><a href="#">Commercial</a></li>
        <li class="nav_item drop_item"><a href="#">Historical</a></li>
      </ul>
    </li>
    <li class="nav_item"><a href="#">About</a></li>
    <li class="nav_item"><a href="#">Contact</a></li>
  </ul>
</div>

    *{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
}

body{
  background: #f5f5f5;
  background-size: cover;
}

.toggle_menu{
  position: fixed;
  padding: 15px 15px 15px 15px;
  margin: 20px;
  color: #f5f5f5;
  background-color: #05CC56;
  cursor: pointer;
  z-index: 10000000;
  font-size: 100%;
  opacity: 0;
  text-align: center;
  box-shadow: 1px 0px 5px #000;
}

.sidebar_menu{
  color: #f5f5f5;
  position: fixed;
  width: 250px;
  margin-left: 0;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(17, 45, 17, 0.8);
  transition: all 0.3s ease-in-out;
  padding: 5px;
  border-right: solid 3px #05CC56;
  z-index: 100000;
  box-shadow: 1px 0px 5px #000;}

.fa-times{
  right: 10px;
  top: 10px;
  opacity: 0.5;
  cursor: pointer;
  position: absolute;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.fa-times:hover{
  opacity: 1;
}

.opacity_one:hover{
  opacity: 1;
}

#logo_image{
  float: left;
  background: url(../img/DDCLogo.png) no-repeat center;
  background-size:  200px auto;
  height: 100px;
  width: 250px;
  z-index: 10000;
  margin-bottom: 30px;
}

.navigation_selection{
  margin: 0 0;
  display: block;
  width: 200px;
  margin-left: 25px;
}

.sidebar_menu > ul > li > ul{
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
  z-index: 1000000000;
  position: relative;
  left: -200px;

}

.sidebar_menu ul > li:hover > ul{
  width:200px;
  display:block;
  position:relative;
  top:0;
  border: 0;
  left:200px;
  z-index: 1000000000;
}

.sidebar_menu ul > li:hover > ul > li > a{
  background:#e8e8e8;
}

.nav_item{
  font-weight: 200;
  font-family: 'Open Sans';
  color: #f5f5f5;
  padding: 12px 0;
  box-sizing: border-box;
  font-size: 14px;
  color: #d8d8d8;
  border-bottom: solid 1px #f5f5f5;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.nav_item > a{
  display: block;
  color: #f5f5f5;
  transition: all 0.4s ease-in-out;
  width: 100%;
}

.nav_item > .current{
  color: #05CC56;
}

.nav_item:hover > a{
  color: #05CC56;
  margin-left: 10px;
  transition: all 0.4s ease-in-out;
}

.hide_menu{
  margin-left: -270px;
}

.opacity_one{
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
}

.slide > img{
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  object-fit: cover;
  z-index: 1;
}


.cycle-slideshow{
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.sidebar_menu > h2{
  font-family: 'Open Sans';
  font-weight: 400;
  margin-left: 25px;
  color: #fff;
  position:
}

.box{
  font-family: 'Open Sans';
  color: #f5f5f5;
  position: absolute;
  bottom: 20px;
  right: 0;
  background-color: #4e5054;
  height: 20%;
  width: 35%;
  z-index: 9999;
  opacity: 0.75;
  overflow: scroll;
  padding: 5px 5px 5px 40px;
  box-shadow: 1px 0px 5px #000;
}

.box > h3{
  font-weight: lighter;
  padding: 0 0 10px 0
}

.foot{
  position: absolute;
  bottom: 0;
  margin-left: 25px;
  margin-bottom: 20px;
  font-size: 10px;
  font-family: 'Open Sans';
  color: #05CC56;
  text-decoration: none;
  font-weight: 200;
}

.foot > a{
  color: #05CC56;
}

.logo{
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: 45%;
  z-index: 10000000;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.logo_show{
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}


@media only screen and (max-width: 500px) {
    body {
        display: none;
    }
}

https://jsfiddle.net/9jc9tsqm/

忽略所有未使用的样式。

Answer 1

是的，删除溢出：从.sidebar_menu隐藏，但你也应该删除#sub_menu的高度：0并使其位置绝对。给nav_item一个相对位置。这样你可以根据需要添加背景颜色和#sub_menu或其他样式。

可折叠侧边栏菜单中的弹出菜单

1 个答案: