How to Write a CSS Script for Adding a Dropdown Menu

Cascading Style Sheets (CSS) can be used to create drop-down menus without using a scripting language, such as JavaScript. The menu items are hidden until the user hovers over the top item of the menu. The rest of the menu items will appear over the rest of the page's content without displacing the content. When done correctly, the menu will appear whether or not JavaScript is enabled in the web browser.

Things You'll Need

• Basic knowledge of HTML and CSS
• Text editor

Instructions

1. Open any text editor, such as Windows notepad.

2. Create the style for the top menu item by typing the following three lines.

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

3. Create the style for the additional menu items by typing the following four lines.

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

   The section "display: none;" says to hide the items by default.

4. Type "#drop ul:hover .link{display:block;}" in order to show the secondary items when the user hovers over the top menu item.

5. Type "#drop{position:absolute;}" to ensure that the drop-down menu appears on top of the content below without displacing it.

6. Create the menu by typing the following seven lines within the body section of your HTML document.

   <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>

7. Save and close the document.

Tips & Warnings

• The second reference for this article tells you to "View the Source Code." In Firefox, click "View Source" under the "View" menu in a Firefox browser. In Internet Explorer, click "Source" under the "View" menu.

References

• Pixelspread: CSS Drop Down Menu
• Texaswebdevelopers: CSS Dropdown Menu