CSS

Question

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

我已尝试设置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定位祖先定位。您position: relative上的li是嵌套子菜单的父级 - 如果您希望子菜单相对于父菜单top: 0而不是li）从position: relative（li）

中删除.dropdown-submenu{position:relative;}

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS

1 个答案: