如何在鼠标悬停时打开材料设计菜单

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.