管理邊欄中的子鏈接

Question

我有一個左邊欄，其中包含鏈接和子鏈接。它看起來如下 -

當我將鼠標懸停在鏈接鼠標子鏈接顯示在側邊欄的內部（在圖像我徘徊的帖子鏈接及其子鏈接鼠標側邊欄裏面的顯示）。
現在我的問題是，或者我想要的是子鏈接應該顯示在側邊欄之外（在側邊欄的右側）。
這裏是我試過到目前爲止

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

請幫助我管理的子鏈接。
謝謝。

Answer 1

你需要使用位置來實現這個 集裏（.post_list）到position:relative; 並設置子菜單（UL）到position:absolute; ，和你必須從刪除overflowx:hidden; sidenav

this是代碼，你應該加上：

.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

你的代碼將變成這個樣子：

.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

你可以嘗試一下調整邊距以滿足你的需要。

檢查這個.. http://jsfiddle.net/2Smgv/10787/

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