Spotter2004 Posted April 30, 2020 Share Posted April 30, 2020 Hello, I found this code at w3schools for a multilevel dropdown with click, but i want it with a mouseover Can someone help me with this please? Thanks a lot Greetz Michael <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li class="dropdown-submenu"> <a class="test" href="#">Another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">3rd level dropdown</a></li> <li><a href="#">3rd level dropdown</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> Link to comment Share on other sites More sharing options...
shaili_shah Posted May 1, 2020 Share Posted May 1, 2020 You can use '' mouseover '' event of jquery. $('.dropdown-submenu a.test').mouseover(function(e){ I hope this will help you. Thanks! Link to comment Share on other sites More sharing options...
Inquirer Posted June 18, 2020 Share Posted June 18, 2020 or CSS: .class:hover { /*CSS code*/ } Link to comment Share on other sites More sharing options...
CreativHedgehog Posted June 19, 2020 Share Posted June 19, 2020 Note that dropdowns are like tooltips and have to be used with this code: .content{ display:none; /*code*/ } .container:hover .content{ display:block; /*code*/ } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now