Time for action — creating a horizontal drop-down menu

Let's take a look at how we can use the Superfish plugin to create a horizontal drop-down menu:

  1. To get started, we'll create a simple HTML page and the associated folders and files like we created in Chapter 1, Designer, Meet jQuery. The body of our HTML file will contain a navigation menu that consists of nested unordered lists as follows:
    <ul id="sfNav" class="sf-menu"> <li><a href="#">Papilionidae</a> <ul> <li><a href="#">Common Yellow Swallowtail</a></li> <li><a href="#">Spicebush Swallowtail</a></li> <li><a href="#">Lime Butterfly</a></li> <li><a href="#">Ornithoptera</a> <ul> <li><a href="#">Queen Victoria's Birdwing</a></li> <li><a href="#">Wallace's Golden Birdwing</a></li> <li><a href="#">Cape ...

Get jQuery for Designers Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.