Menu
I have a Bootstrap dropdown menu. The last li item is a submenu. How do I get the submenu to dropup while the full menu drops down? Here's the code:
<div class="dropdown"> <a class="inputBarA dropdown-toggle" data-toggle="dropdown" href="#">FILTER</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li role="presentation"> <a role="menuitem" href="#">Text</a> </li> <li role="presentation"> <label>Label name</label> <label>Label name</label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> </li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Centralities</a> <ul class="dropdown-menu"> <label class="radio"> <input type="radio" name="options" id="optionsRadios1" value="A" checked> AA </label> <label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="B"> BB </label><label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="C"> CC </label><label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="D"> DD </label><label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="E"> EE </label> </ul> </li> </ul> </div> 
705
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
Use data-offset or data-reference to change the location of the dropdown.
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
Just wrap the contents of the menu in a form tag. That's it. So, instead of ul. dropdown-menu , use form.
The best solution:
<div class="dropup"> <ul class="dropdown-menu"></ul> </div> It's a native class in bootstrap. The bootstrap (using 3.1.1) css file has a .dropup .dropdown-menu selector so that's how I found out.
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
