Create Dropdown Menus - Exercise

Contact Us or call 1-877-932-8228
Create Dropdown Menus - Exercise

Create Dropdown Menus

Duration: 20 to 30 minutes.

Open the file jqy-effects/Exercises/index.html in your browser. Use the file js/navigation.js. Your task is to add dropdowns to the main navigation at the top of the page.

  1. Hovering over an item in the main menu should show that item's submenu elements, if any. Note that we would not want to show deeply nested elements, just child elements -- otherwise all levels of submenu, sub-submenu, etc., would pop open at once.
  2. Exiting an item should hide any submenu items.
  3. To accomplish this, use the $.fn.hover method to:
    1. add/remove the hover class from the top-level menu elements (this highlights the current item)
    2. slide the submenu (the child ul) up or down as appropriate


$(document).ready(function() {

	// when a nav item is hovered,
	// add a class to it and show
	// any child ULs (dropdowns)
	$('#nav li').hover(function() {

We first locate all the list item elements within the nav unordered list. We then add a hover function that will toggle the 'hover' class, find all the ul children (the submenus) and slide toggle them. As long as the menus and submenus start in an internally consistent state (parent without the hover class and children hidden, or parent with the hover class and children visible), the actions will be in sync.