管理边栏中的子链接

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 
}