I have this HTML which renders a bootstrap dropdown under the object. It is possible to make it apear above the Title button?
<div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown"> Title <span class="caret"></span> </a> <ul class="dropdown-menu"> <li class="dropdown-submenu"><a>Option 1</a></li> <li class="dropdown-submenu"><a>Option 1</a></li> (various number of <li>) </ul> </div>
I've tried with position:absolute; top:50px
but doesn't work for any case.
Thanks!
Example Explained HTML) Use any element to open the dropdown content, e.g. a <span>, or a <button> element. Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS.
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
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.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
This is by default part of what Bootstrap can do. It's in the docs under Button Dropdowns - Dropup menus
<div class="btn-group dropup">
As it's absolutely positioned, you will need to have some space above the button so you can see the drop up menu, so I wouldn't use it at the top of a page.
I've set up a fiddle here for you. If you remove the <br>
at the top, you'll see that the menu options are hidden at the top of the output box.
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