Folie Navigationsleiste Menü nicht mit voller Breite angezeigt

Question

Ich habe eine Folie Navigationsleiste, wenn ich schweben die erste Option "Module" das Menü unter es erscheint nicht mit voller Breite, eine andere Sache, ich brauche dieses Menü angezeigt, wenn ich auf klicke „Module nicht schweben, wie kann ich es tun this is a demo

ich habe versucht, die folgenden Funktionen ausführen:..

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

Answer 1

Die Regel .sidebar_menu hat overflow: hidden, wodurch das Untermenü abgeschnitten wird.

So schalten Sie mit der Maus klicken Sie jQuery, wie diese

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

Sie haben overflow:hidden auf sidebar_menu, die die überquellenden Breite von Hover-Elemente verursacht zu verstecken