Creating a Drop-Down Menu Using a CSS Script

Adding a drop-down menu to your website can be an efficient use of space and give users several options through one link. Here is the CSS script to help you do that.

Click "Start" and click "Notepad" to open the text editor. Click "File," "New" to launch a new text.

Type the following CSS script to create the drop-down style:

#drop li.top {font-family: Verdana, Geneva, san-serif;
font-size: 100%;
color: #FF00FF;}

Type the following CSS script to create the menu options styles:

#drop ul .link{display:none;
font-family: Verdana, Geneva, san-serif;
font-size: 75%;
color: #0000FF;}

Type "#drop ul:hover .link{display:block;}" to show secondary items when a user hovers over a menu option and type "#drop{position:absolute;}" to place the drop-down menu at the top of the page.

Create the menu by typing the following script:

<div id="drop">
<ul id="head">
<li class="top">Top</li>
<li class="link"><a href="#">Item 1</a></li>
<li class="link"><a href="#">Item 2</a></li>
<li class="link"><a href="#">Item 3</a></li>
</ul> </div>

Click "File," "Save" to save your CSS drop-down menu script.