スライドナビゲーションバーのメニューが全幅で表示されない

Question

スライドショーバーが1つあります。最初のオプション "モジュール"をホールドすると、その下のメニューが全幅で表示されません 別のものは、 「モジュールは、私はそれを行うことができますどのようにホバーない私は次の操作を行うことを試みた 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があります。あなたはこの

$(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>

Answer 2

あなたはホバー項目のあふれ幅を非表示にする原因になっているsidebar_menuにoverflow:hiddenを持って