Creating a drop-down menu in HTML
This tutorial illustrates how to make a drop-down menu using HTML and CSS. When you finish the tutorial, you will have a menu that appears similar to the following:
 
To create the drop-down menu, you will need to:
Create the Required HTML Code
Create the Required CSS Code


Creating the Required HTML Code

The first step in creating a drop-down menu is to add the required HTML code.
In your HTML file, create your main menu bar. You will create an ul element that includes each of your main menu options in cross-reference (a) elements.
Note: Notice that the nav element has an id attribute value of menu.
You will add embedded li elements for those menu options that have submenus:
Add a link within the head element to the html file that points to the stylesheet that will contain the CSS required for the drop-down menu.
 
Creating the Required CSS Code

To create the style, you will need to format:
The list elements for the top-level menu items
The list elements for the sub-menus
The cross-reference elements for both items
In your stylesheet, add the following code:
Add the following CSS definitions that will hide the sub-menu elements and only show them when you hover over them.  Doing so also converts the submenu unordered lists into block elements instead of inline elements:
Note: Notice that you are using the #menu id attribute that you set on the nav element in your CSS selectors.
Add the following statements to  format the main menu:
You specify these statements to:
Ensure that the menu items float to the left so that they appear on a single line. If you were to remove that line, the list items would appear horizontally instead of vertically.
Format the text for the main menu entries.
Change the color of the main menu text when you hover the mouse above it.
Add the following statements to format the submenus:
You specify these elements to:
Show the sub-menu when you hover over the associated menu option in the main menu. 
Change the color of the sub-menu item text when you hover over item.
Position the sub-menu to appear below the appropriate menu item.

Summary

You have now created the basic layout for your menu. You can modify colors and styles as necessary to match the color scheme for your website. To see example of the colors that you can use, go to http://www.w3schools.com/html/html_colorvalues.asp.

yourName_date