Demo of refresh method for Menu JQuery UI
Add Item Refresh
You can add New item to menu by using Add Item button , but it will be initialized after you press the refrsh button.
To check this try to select the item you have added before pressing the refresh button
HTML
<ul id='my_menu'>
<li><div>Education</div></li>
<li><div>Job</div></li>
<li><div>Fruits</div>
<ul>
<li><div>Mango</div></li>
<li><div>Banana</div></li>
<li><div>Orange</div></li>
<li><div>Apple</div></li>
</ul>
</li>
<li><div>Vehicle</div></li>
<li><div>Games</div>
<ul>
<li><div>Football</div></li>
<li><div>Tennis</div>
<ul>
<li><div>Lawn Tennis</div></li>
<li><div>Table Tennis</div></li>
</ul>
</li>
<li><div>Golf</div></li>
<li><div>Badminton</div></li>
</ul></li>
<li><div>Dresses</div></li>
</ul>
<input type='text' class='form-control' id='t1' name='t1' placeholder='Item Name' >
<button type='button' class='btn btn-succcess' id='b1'>Add Item</button> <button type='button' class='btn btn-succcess' id='b2'>Refresh</button>
jquery
<script>
$(document).ready(function() {
////////////////
$( "#my_menu" ).menu({
});
///////////////
$("#b1").click(function() {
var str=$('#t1').val();
$("#my_menu").append("<li><div>" + str + "</div></li>")
})
///////////
///////////////
$("#b2").click(function() {
$("#my_menu").menu("refresh")
})
///////////
})
</script>