xxxxxxxxxx1
<div class="dropdown">2
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"3
data-mdb-toggle="dropdown" aria-expanded="false">4
Dropdown button5
</button>6
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">7
<li><a class="dropdown-item" href="#">Action</a></li>8
<li>9
<a class="dropdown-item" href="#">Another action</a>10
</li>11
<li>12
<a class="dropdown-item" href="#">13
Submenu »14
</a>15
<ul class="dropdown-menu dropdown-submenu">16
<li>17
<a class="dropdown-item" href="#">Submenu item 1</a>18
</li>19
<li>20
<a class="dropdown-item" href="#">Submenu item 2</a>21
</li>22
<li>23
<a class="dropdown-item" href="#">Submenu item 3 » </a>24
<ul class="dropdown-menu dropdown-submenu">25
<li>26
<a class="dropdown-item" href="#">Multi level 1</a>27
</li>28
<li>29
<a class="dropdown-item" href="#">Multi level 2</a>30
</li>31
</ul>32
</li>33
<li>34
<a class="dropdown-item" href="#">Submenu item 4</a>35
</li>36
<li>37
<a class="dropdown-item" href="#">Submenu item 5</a>38
</li>39
</ul>40
</li>41
</ul>42
</div>xxxxxxxxxx1
.dropdown-menu li {2
position: relative;3
}4
.dropdown-menu .dropdown-submenu {5
display: none;6
position: absolute;7
left: 100%;8
top: -7px;9
}10
.dropdown-menu .dropdown-submenu-left {11
right: 100%;12
left: auto;13
}14
.dropdown-menu > li:hover > .dropdown-submenu {15
display: block;16
}17
18
.dropdown-hover:hover>.dropdown-menu {19
display: inline-block;20
}21
22
.dropdown-hover>.dropdown-toggle:active {23
/*Without this, clicking will make it sticky*/24
pointer-events: none;25
}1
1
Console errors: 0