CSS在下拉菜单中有另一个下拉菜单

h6423330

我有这段代码

<li class="dropdown" runat="server" id="btn_logout">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user">USER</i> <b class="caret"></b></a>
  <ul class="dropdown-menu" style="background-color:black;">
    <li class="dropdown-header">DROPDOWN HERE: </li>
    <li><a href="#">Manage Account</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="logout.php">Sign Out</a></li>
  </ul>
</li>

我想在其显示的地方添加另一个下拉菜单drop down here我怎样才能做到这一点?

上午

简短的回答,引导程序不支持子菜单

(TLDR)您可能会想到一些黑客:

.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;
  border-radius: 0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<li class="dropdown" runat="server" id="btn_logout">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user">USER</i> <b class="caret"></b></a>
  <ul class="dropdown-menu" style="background-color:black;">
    <li class="dropdown-submenu">
      <a class="dropdown-item" href="#">another level</a>
      <ul class="dropdown-menu" style="background-color:black;">
        <li><a href="#">Manage Account</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="logout.php">Sign Out</a></li>
      </ul>
    </li>
    <li><a href="#">Manage Account</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="logout.php">Sign Out</a></li>
  </ul>
</li>

资源

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在另一个下拉菜单中选择选项时显示下拉菜单

如何基于另一个下拉菜单更改下拉菜单值

禁用p下拉菜单,具体取决于选择另一个p下拉菜单PrimeNG

根据另一个下拉菜单选择过滤下拉菜单

当我通过另一个下拉菜单悬停时,出现下拉菜单的子菜单

WordPress下拉菜单重叠-悬停一个可打开另一个

下拉选择的选项在另一个下拉菜单中选择选项

来自另一个下拉菜单的国际电话输入更改下拉菜单拨号代码

具有一个主下拉菜单的多个下拉菜单实现

多个下拉菜单,即使我单击另一个下拉菜单,也只有一个可用

关闭下拉菜单,同时在引导程序中打开另一个菜单

CSS下拉菜单,添加另一个<ul>

下拉菜单,下拉菜单中有多个值

使自动完成工作在下拉菜单上,并使其填充另一个下拉菜单的内容

根据另一个下拉菜单更改下拉菜单

Bootstrap Yamm悬停在下拉菜单上将另一个设置为显示块

Knockout.js-使用另一个下拉菜单的值重新加载带有新选项的下拉菜单

在另一个菜单中选择特定选项后,在下拉菜单中隐藏一个选项

下拉菜单选择一个.css文件?

单击另一个下拉菜单时,下拉菜单中缺少离子选择的项目

根据另一个下拉菜单的选定值,过滤并显示一个下拉菜单的选项

Excel数据透视表过滤器-如何使一个过滤器下拉菜单依赖于另一个下拉菜单?

根据使用Javascript在另一个下拉菜单中选择的内容来设置下拉菜单值

我有两个下拉菜单,如果更改下拉菜单的值,它将影响另一个下拉菜单

单击另一个关闭下拉菜单

如果另一个下拉菜单打开,我如何关闭下拉菜单

如果单击另一个下拉菜单,如何使下拉菜单自动关闭?

打开一个下拉菜单,用 JavaScript 关闭另一个

当另一个下拉菜单打开时隐藏侧面菜单中的一个下拉菜单