How to Make Nested Submenus in HTML

Create nested unordered lists to make submenus in HTML.

Web designers create menus by using HTML, Cascading Style Sheets (CSS) and sometimes JavaScript. The preferred method for structuring a menu in HTML is to create an unordered list. Unordered lists create bullet lists, but you can change or even strip away the bullets and style the lists in whatever way you like to create many different types of menus. You create submenus in HTML by nesting unordered lists inside list item tags.

Instructions

1. Type out your top-level menu items in a list, putting each item on its own line. Wrap each line with anchor tags to turn your menu items into links. Wrap list item tags around each set of anchor tags to turn them into bullet list items. The following is an example of what your code should look like:

   <li><a href="page_one.html">Page One</a></li>

   <li><a href="page_two.html">Page Two</a></li>

2. Start a new line above the list, and add an opening unordered list tag on that line. Add a new line to the bottom of the list, and place a closing unordered list tag there. Give the unordered list tag a class of "menu." Indent your list items to make your code easier to read. Now your list will look like this:

   <ul class="menu">

   <li><a href="page_one.html">Page One</a></li>

   <li><a href="page_two.html">Page Two</a></li>

   </ul>

3. Find the menu item where you want to place the submenu. The submenu will go under this item. Place a new unordered list between the closing anchor tag for the top-level item's link and its closing list item tag. Give the class name "submenu" to each nested unordered list you create. Code the new unordered list the same way you coded the top level of the menu:

   <ul class="menu">

   <li><a href="page_one.html">Page One</a>

   <ul class="submenu">

   <li><a href="sub_page_one.html">Sub-Page One</a></li>

   </ul>

   </li>

   <li><a href="page_two.html">Page Two</a></li>

   </ul>

4. Write CSS code to style your unordered list, and give it the appearance of a menu. Following are the selectors for your menu and submenus:

   .menu {}

   .submenu {}

   Set properties for your menu and your submenus between the appropriate set of curly braces. Select the list item tags using ".menu li {}" and the anchor tags using ".submenu a {}". Use "list-style: none" in your ".menu" selector if you want to remove the bullets.

Tips & Warnings

• Check your menus in a variety of browsers. Many popular methods of styling menus and submenus require extra programming to add compatibility for older versions of Internet Explorer.

• Back up your HTML and CSS files before editing them.

Resources

• Read this Article in Spanish
• Listamatic: One List, Many Options
• Superfish: Suckerfish on 'Roids