Creating a basic drop-down menu
In this recipe we will create a basic drop-down menu that will have three menu items. Hovering the mouse pointer over a menu item will display a submenu and taking the pointer away from it will hide it.
Getting ready
Create a folder in the Chapter7 directory and name it as Recipe1. Now create a file named index.html inside it.
How to do it...
Start by creating the structure of menus and the CSS styles for them. Our menu will be an unordered list where each list item will be a menu header. Inside the list item will be an anchor which will contain the text for a menu. Next to it will be another unordered list whose list items will serve as menu items. Each of these menu items will contain a link which can be used to navigate to a page on a website.
While writing markup, we will also take care of the fact that a menu should be available on the page even if JavaScript is turned off in the user's browser. The following code defines the markup that we require:
<html...
