- I am new in bootstrap,the dropdown won't hide, i want dropdown when
i hover on the link, but its show always, advance thanks to
everyone. here is the code
<nav> <ul class="nav navbar-nav main-navigation"> <li><a href="">HOME</a></li> <li><a href="">PORTFOLIO</a></li> <li><a href="">BLOG</a></li> <li><a href="">PAGES</a></li> <li><a href="">FEATURES</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">MEGA MENU</a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> </ul> </li> <li><a href="">CONTACT</a></li> </ul> </nav>
Asked
Active
Viewed 665 times
-1
-
1Duplicate question here http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click – Bryant Miano Mar 25 '15 at 18:33
-
do you even have any css – nolawi Mar 25 '15 at 19:54
2 Answers
0
By default, the Bootstrap (3.0+) dropdown menu only appears/disappears on click. This behavior would need to be overruled through CSS or JS. If you want to simply have the dropdown appear on hover while preserving the click to drop down functionality on mobile, something like this should suffice:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
Demonstration: http://www.bootply.com/tpCO1Nb4E8
Opaw Nako
- 1,096
- 1
- 8
- 17
-
It does work, as demonstrated here: http://www.bootply.com/tpCO1Nb4E8. Looks like you have other issues interfering with the default bootstrap functionality. – Opaw Nako Mar 25 '15 at 19:24
0
You can also use Jquery: https://jsfiddle.net/2w4n7pho/
<script>
$(function(){
$("li.dropdown").hover(function(){
$(this).toggleClass("open");
});
});
</script>
Mark
- 4,773
- 8
- 53
- 91