Applying themes to submenus

When the menu widget displays submenus, there is no discernible difference in appearance. That is, visually, they look just like the main menu. We wanted to present the user with a little contrast between the main menu and its children; we can do so by extending the widget to allow for custom classes to be applied to the submenus.

Getting ready

Let's use the following markup to create our menu widget with a couple submenus:

<ul id="menu">
            <li><a href="#">First Item</a></li>
            <li><a href="#">Second Item</a></li>
            <li><a href="#">Third Item</a></li>
            <li>
                <a href="#">Fourth Item</a>
                <ul>
                    <li><a href="#">Fifth</a></li>
                    <li>
                        <a href="#">Sixth</a>
                        <ul>
     ...