Unterlinks in der Seitenleiste verwalten

Question

Ich habe eine linke Seitenleiste mit Links und Unterlinks. Es sieht wie folgt aus -

, wenn ich die Maus auf Links in der Seitenleiste Anzeigeunter Link schweben (In Bild habe ich Maus der Beiträge Links schwebt und seine Unter Links in der Seitenleiste angezeigte).
Jetzt meine Frage ist oder was ich will ist, dass Sublinks außerhalb der Sidebar (auf der rechten Seite der Sidebar) angezeigt werden sollten.
Hier ist, was ich

.sidenav { 
 
    height: 90%; 
 
    width: 50%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    /*background-color: #111;*/ 
 
    background:#23282D; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
    margin-top:62px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
    margin-top:50px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" id='sidebar_close'>&times;</a> 
 
    <ul style='list-style:none;'> 
 
    <li class='myclass'><a href="#">Dashboard</a></li> 
 
<li class='post_list'> <a href="#">Posts</a> 
 
    <ul style='list-style:none;' class='sub_links'> 
 
     <li><a href='#'>All</a></li> 
 
     <li><a href='#'>Add</a></li> 
 
     <li><a href='#'>Category</a></li> 
 
    </ul> 
 
</li> 
 
    <li class='post_list'> 
 
    <a href="#">Pages</a> 
 
<ul style='list-style:none;' class='sub_links'> 
 
     <li><a href='#'>All</a></li> 
 
     <li><a href='#'>Add</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" class='media_upload'>Media</a></li> 
 
<li class='post_list'> <a href="#">User</a> 
 
    <ul style='list-style:none;' class='sub_links'> 
 
     <li><a href='#'>All</a></li> 
 
     <li><a href='#'>Add</a></li> 
 
     <li><a href='#'>Profile</a></li> 
 
    </ul> 
 
</li> 
 
    <li><a href="#">Setting</a></li> 
 
    <li><a href="#">Logout</a></li> 
 
    </ul> 
 
</div>

Bitte helfen Sie mir bisher versucht Sub Links zu verwalten.
Danke.

Answer 1

Sie brauchen Position zu verwenden, um dieses Satz li zu erreichen (.post_list) zu position:relative; und setzen Untermenü (ul) zu position:absolute; , und Sie entfernen müssen overflowx:hidden; von sidesav

dies der Code, den Sie sollten hinzufügen:

.post_list{ 

     position: relative; 
} 

.post_list ul{ 

    list-style: none; 
    position: absolute; 
    left: 100%; 
    background: #23282D; 
    top: 0; 
    display: none; 
} 

.post_list:hover ul{ 

    display: block; 
} 

jsfiddle

Ihr Code so geworden:

.sidenav { 
 
    height: 90%; 
 
    width: 50%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    /*background-color: #111;*/ 
 
    background:#23282D; 
 
    /*overflow-x: hidden;*/ 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
    margin-top:62px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
    margin-top:50px; 
 
} 
 

 
.post_list{ 
 
    
 
     position: relative; 
 
} 
 

 
.post_list ul{ 
 
    
 
    list-style: none; 
 
    position: absolute; 
 
    left: 100%; 
 
    background: #23282D; 
 
    top: 0; 
 
    display: none; 
 
} 
 

 
.post_list:hover ul{ 
 
    
 
    display: block; 
 
} 
 

 

 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" id='sidebar_close'>&times;</a> 
 
    <ul style='list-style:none;'> 
 
    <li class='myclass'><a href="#">Dashboard</a></li> 
 
<li class='post_list'> <a href="#">Posts</a> 
 
    <ul style='list-style:none;' class='sub_links'> 
 
     <li><a href='#'>All</a></li> 
 
     <li><a href='#'>Add</a></li> 
 
     <li><a href='#'>Category</a></li> 
 
    </ul> 
 
</li> 
 
    <li class='post_list'> 
 
    <a href="#">Pages</a> 
 
<ul style='list-style:none;' class='sub_links'> 
 
     <li><a href='#'>All</a></li> 
 
     <li><a href='#'>Add</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#" class='media_upload'>Media</a></li> 
 
<li class='post_list'> <a href="#">User</a> 
 
    <ul style='list-style:none;' class='sub_links'> 
 
     <li><a href='#'>All</a></li> 
 
     <li><a href='#'>Add</a></li> 
 
     <li><a href='#'>Profile</a></li> 
 
    </ul> 
 
</li> 
 
    <li><a href="#">Setting</a></li> 
 
    <li><a href="#">Logout</a></li> 
 
    </ul> 
 
</div>

Answer 2

U kann dies mit der Anpassung der Marge an Ihre Bedürfnisse versuchen.

Check this .. http://jsfiddle.net/2Smgv/10787/

.dropdown:hover .dropdown-menu { 
    display: block; 
    margin: 0 50%; # adjust as per your need 
}