html - css 在下拉列表中有另一个下拉列表
问题描述
我有这段代码
<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>
推荐阅读
- google-analytics - 我可以在自定义报告中显示与事件相关的综合浏览量吗?
- javascript - 正则表达式 - 输出字符无效
- amp-html - 是否可以自定义 AMP Stories 的分享按钮位置?
- javascript - 在另一个函数中使用异步等待中的返回值
- php - 替换扩展实体类型的“label.form.empty_value”
- java - 从短/字节缩小隐式转换
- excel - 如何根据与另一列的完全匹配对列进行排序
- flask - 带有 websockets 和 flask-socketio 的 Python 到 Python WebSockets
- java - 如果条件可以为真或假,为什么有必要
- jquery-selectors - Cheerio:选择多个输入的值