We want to keep our original file with the plain menu. Save your world-of-bees.html as world-of-bees2.html to create a new web page and continue working on the menu.

In our unordered list, we'll create new unordered lists for our submenus. Let's start with the first submenu for menu item Bees.

The following is the code of the new unordered list for the submenu:

<ul>           
<li><a href="javascript:player.flyToStep(2)">what's a 
  bee?</a></li>             
<li><a href="javascript:player.flyToStep(4)">4 groups</a></li>             
<li><a href="javascript:player.flyToStep(5)">bee body</a></li>         
</ul>   

Put this list between the <li></li> tags of the menu item Bees, just before the end tag </li>.

The code will look as shown in the following screenshot. Pay attention to the end tag </li> after the whole new sublist.

The webpage now looks like the following screenshot:

This code works immediately as you do not have to compile or upload it first. Maybe you want to change the design of the sublist, we will do that later. First, we'll add the other sublists to our menu.

Look at the following screenshot for the code of the complete menu.

The last thing that we want to change is the design of the submenu. We want to get rid of the bullets and we want to give the submenu a lighter background if we move the mouse over it.

In the CSS part, we add the following code to accomplish this:

#nav li li {   
  list-style-type: none;   
  margin-left: -24px; 
} 
#nav li li a:hover {   
  background-color: #777;   
  color: #fff;
} 

By using li li, we can reference to the submenu instead of the main menu items, as shown in the following screenshot:

In this task, we created submenus for our prezi by using nested unordered lists in the HTML code. We also added some CSS code to change to design of the submenus. The JavaScript code to communicate with the prezi was the same, except from the path step numbers.