JqueryUI Menu

The jQuery UI Menu Widget is to transform a list of hyperlinks into a themeable menu which can be controlled using Keyboard or Mouse.
$( "#menu" ).menu();
<ul id = "menu" style="width:100px;"> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-2</a> <ul> <li><div>SubMenu-1</div></li> <li ><div>SubMenu-2</div></li> <li><div>SubMenu-3</div></li> </ul> </li> <li class="ui-state-disabled"><a href="#">Menu-3</a></li> <li><a href="#">Menu-4</a></li> </ul>
run this source code Browser View
Full Source
<!doctype html> <html> <head> <title>jQuery UI menu example</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { $( "#menu" ).menu(); }); </script> </head> <body> <ul id = "menu" style="width:100px;"> <li><a href="#">Menu-1</a></li> <li><a href="#">Menu-2</a> <ul> <li><div>SubMenu-1</div></li> <li ><div>SubMenu-2</div></li> <li><div>SubMenu-3</div></li> </ul> </li> <li class="ui-state-disabled"><a href="#">Menu-3</a></li> <li><a href="#">Menu-4</a></li> </ul> </body> </html>