In this tutorial, we will learn JQuery UI Menu Example

Menu widget in jQuery UI creates a menu that contains items and sub-items in a sub-menu related to a particular item on the menu. A list is transformed, adding theming, mouse and keyboard navigation support.

Example :

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JQuery UI Menu Example</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
    <style type="text/css">
            margin:30px auto;
            border:2px solid #008B8B;
            text-align: center;
       .ui-menu { 
            width: 150px;
<h1>JQuery UI Menu Example -</h1>
<ul id="menu">
    <li class="ui-state-disabled"><div>Menu</div></li>
    <li><div>Menu 1</div></li>
    <li><div>Menu 2</div></li>
        <div>Menu 3</div>
            <li class="ui-state-disabled"><div>Menu 3 Head</div></li>
            <li><div>Menu 3.1</div></li>
            <li><div>Menu 3.2</div></li>
    <li><div>Menu 4</div></li>
    <li><div>Menu 5</div>
            <li><div>Menu 5 Head</div>
                    <li><div>Menu 5.1</div></li>
                    <li><div>Menu 5.2</div></li>
            <li><div>Menu 6</div>
                    <li><div>Menu 6.1</div></li>
                    <li><div>Menu 6.2</div></li>
                    <li><div>Menu 6.3</div></li>
            <li><div>Menu 7</div></li>
    <li class="ui-state-disabled"><div>Specials (n/a)</div></li>

    $( function() {

May this example help you.