子菜單下拉菜單項強制到列表頂部

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