子菜单下拉菜单项强制到列表顶部

Question

我有一个引导下拉菜单，当你将鼠标悬停在它们上面时，它们打开一个子菜单，这是所有正常工作，但是我遇到的主要问题是我想第二层链接下拉强行到列表的顶部，而不是相邻的当前扩展项目

我试过设置top:0;，但它似乎只会工作相对于它的div。

如果你看一下我的代码更清楚地解释它一点点

我有一个CodePen以及下面

<div class="dropdown"> 
    <a class="dropdown-toggle" type="button" id="department-nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    ALL DEPARTMENTS 
    </a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="department-nav-dropdown"> 
    <li class="dropdown-submenu"> 
     <a class="clearfix"> 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> This is correct</div> 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
     </a> 
     <ul class="dropdown-menu dropdown-menu--sub"> 
     <li><a tabindex="-1" href="#">This is correct</a></li> 
     <li><a href="#">This is correct</a></li> 
     <li><a href="#">This is correct</a></li> 
     </ul> 
    </li> 
    <li class="dropdown-submenu"> 
     <a class="clearfix"> 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
     </a> 
     <ul class="dropdown-menu dropdown-menu--sub"> 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
     <li><a href="#">This should be in the same place as the first expanded list</a></li> 
     <li><a href="#">Second level</a></li> 
     </ul> 
    </li> 
      <li class="dropdown-submenu"> 
     <a class="clearfix"> 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
     </a> 
     <ul class="dropdown-menu dropdown-menu--sub"> 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
     <li><a href="#">Second level</a></li> 
     <li><a href="#">Second level</a></li> 
     </ul> 
    </li> 
      <li class="dropdown-submenu"> 
     <a class="clearfix"> 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
     </a> 
     <ul class="dropdown-menu dropdown-menu--sub"> 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
     <li><a href="#">Second level</a></li> 
     <li><a href="#">Second level</a></li> 
     </ul> 
    </li> 
      <li class="dropdown-submenu"> 
     <a class="clearfix"> 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
     </a> 
     <ul class="dropdown-menu dropdown-menu--sub"> 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
     <li><a href="#">Second level</a></li> 
     <li><a href="#">Second level</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSS

.dropdown-submenu{position:relative;} 
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} 
.dropdown-submenu:hover>.dropdown-menu{display:block;} 
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;} 

Answer 1

绝对定位的元素的片段会相对于它的最接近的非static定位的祖先定位。您对li是嵌套子菜单的父position: relative - 如果你想在子菜单是top: 0相对于父菜单（而不是li）从li（.dropdown-submenu{position:relative;}）

.dropdown-submenu > .dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    border-radius: 0 6px 6px 6px; 
 
} 
 

 
.dropdown-submenu:hover > .dropdown-menu { 
 
    display: block; 
 
} 
 

 
.dropdown-submenu.pull-left { 
 
    float: none; 
 
} 
 

 
.dropdown-submenu.pull-left > .dropdown-menu { 
 
    left: -100%; 
 
    margin-left: 10px; 
 
    border-radius: 6px 0 6px 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="dropdown"> 
 
    <a class="dropdown-toggle" type="button" id="department-nav-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    ALL DEPARTMENTS 
 
    </a> 
 
    <ul class="dropdown-menu" role="menu" aria-labelledby="department-nav-dropdown"> 
 
    <li class="dropdown-submenu"> 
 
     <a class="clearfix"> 
 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> This is correct</div> 
 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
 
     </a> 
 
     <ul class="dropdown-menu dropdown-menu--sub"> 
 
     <li><a tabindex="-1" href="#">This is correct</a></li> 
 
     <li><a href="#">This is correct</a></li> 
 
     <li><a href="#">This is correct</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="dropdown-submenu"> 
 
     <a class="clearfix"> 
 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
 
     </a> 
 
     <ul class="dropdown-menu dropdown-menu--sub"> 
 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
 
     <li><a href="#">This should be in the same place as the first expanded list</a></li> 
 
     <li><a href="#">Second level</a></li> 
 
     </ul> 
 
    </li> 
 
\t \t  <li class="dropdown-submenu"> 
 
     <a class="clearfix"> 
 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
 
     </a> 
 
     <ul class="dropdown-menu dropdown-menu--sub"> 
 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
 
     <li><a href="#">Second level</a></li> 
 
     <li><a href="#">Second level</a></li> 
 
     </ul> 
 
    </li> 
 
\t \t  <li class="dropdown-submenu"> 
 
     <a class="clearfix"> 
 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
 
     </a> 
 
     <ul class="dropdown-menu dropdown-menu--sub"> 
 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
 
     <li><a href="#">Second level</a></li> 
 
     <li><a href="#">Second level</a></li> 
 
     </ul> 
 
    </li> 
 
\t \t  <li class="dropdown-submenu"> 
 
     <a class="clearfix"> 
 
     <div class="pull-left"><i class="fa fa-fw fa-home" aria-hidden="true"></i> Incorrect</div> 
 
     <div class="clearfix"><i class="fa fa-chevron-right" aria-hidden="true"></i></div> 
 
     </a> 
 
     <ul class="dropdown-menu dropdown-menu--sub"> 
 
     <li><a tabindex="-1" href="#">This should be in the same place as the first expanded list</a></li> 
 
     <li><a href="#">Second level</a></li> 
 
     <li><a href="#">Second level</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

删除 position: relative