当我将鼠标悬停在侧栏上的链接子链接显示时(在图像中我悬挂了帖子链接的鼠标,其子链接显示在侧边栏内)。
现在我的问题是或者我想要的是子链接应该显示在侧边栏之外(侧边栏的右侧)
这是我到目前为止尝试的内容
.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'>×</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>
请帮我管理子链接 感谢。
答案 0 :(得分:1)
你需要使用位置来实现这一目标
将li( .post_list )设置为position:relative;
并将子菜单( ul )设置为position:absolute;
,您必须从 sidenav
overflowx:hidden;
这是你应该添加的代码:
.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;
}
你的代码会变成这样:
.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'>×</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>
答案 1 :(得分:0)
您可以根据需要调整保证金。
检查一下.. http://jsfiddle.net/2Smgv/10787/
.dropdown:hover .dropdown-menu {
display: block;
margin: 0 50%; # adjust as per your need
}