How to open material design menu on mouse hover

Question

I, am using material design lite to create the menu. As per the documentation the menu open on click on the icon. However, I need to open the menu on mouse hover

Here is the code for the menu

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul> 

Also, can anyone let me know how can I create mega menu as in this link using Material Design Lite

Answer 1

For menu click event is already written so you can use same event on mouse over and out. See updated button element.

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon" onmouseover="this.click()" onmouseout="this.click()"> <i class="material-icons">more_vert</i> </button> <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left"> <li class="mdl-menu__item">Some Action</li> <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li> <li disabled class="mdl-menu__item">Disabled Action</li> <li class="mdl-menu__item">Yet Another Action</li> </ul> 

Move mouse over and out event to javascript functions to get more control.

Note: I am not UI developer, so it may not be best solution.