css have another dropdown within a dropdown

Question

I have this piece of code

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

I would like to have another dropdown where it says drop down here. How can I do this?

You cannot do it with clicks, since clicking in the sub-dropdown will close the first one. But you can use CSS to open the sub-dropdowns when hovering on the desired element. — ffflabs
– ffflabs, Commented Nov 3, 2018 at 22:06
Welcome to StackOverflow! As you will see over time, SO is not about "asking for help, please". It's quite usual that we face doubts that we can't find an answer to it, and we can take advantage of communities like SO to help us out. What this community asks back is that you write good questions, if you want to get better at this, I recommend that you take a few time reading the tour. — a--m
– a--m, Commented Nov 3, 2018 at 22:08

a--m · Accepted Answer · 2018-11-03 21:58:37Z

Short answer, submenus are not supported on bootstrap.

(TLDR) There are hacks as you may imagine:

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

source

Collectives™ on Stack Overflow

css have another dropdown within a dropdown

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related