Fly-Out-Menü aus reduzierbarem Sidebar-Menü

Question

Ich versuche, ein Flyout-Untermenü aus einem reduzierbaren Sidebar-Menü zu erstellen, aber das Flyout-Menü wird nicht vollständig angezeigt, da die Breite der Sidebar zu klein ist. Wie kann ich das Flyout haben, ohne die Breite der Seitenleiste zu ändern?

<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/

alle nicht verwendeten Stile ignorieren.

Answer 1

Ja, Überlauf entfernen: versteckt von .sidebar_menu, aber Sie sollten auch die Höhe: 0 des #sub_menu löschen und seine Position absolut machen. Gib nav_item eine relative Position. Auf diese Weise können Sie eine Hintergrundfarbe und was nicht zum # sub_menu oder anderen Stylings hinzufügen, wenn Sie möchten.