How to Create the Drop Down Links for a Website

Many web design fads come and go, but drop-down menu links seem to be here to stay, as they combine ease of use with a simplicity of design that saves space and looks good. If you know how to create style sheets with CSS, creating drop-down menus has never been more straightforward.

Instructions

1. 

   Create an HTML unordered list on the desired page like so:
   <ul>
   <li>List Item 1</li>
   <li>List Item 2</li>
   <li>List Item 3</li>
   </ul>

2. 

   Nest a second unordered list inside one of the list items. The idea is for the nested list to be the drop-down list that appears when you hover or click on the list item that contains it. The code will now look like this:
   <ul>
   <li>List Item 1</li>
   <li>List Item 2
   <ul>
   <li>Drop-Down Item 1</li>
   <li>Drop-Down Item 2</li>
   </ul>
   </li>
   <li>List Item 3</li>
   </ul>
   Note that "List Item 2" doesn't close with the </li> tag until after the nested list is complete.

3. 

   Get rid of the automatic list formatting by editing your CSS style sheet. You can have any type of formatting you like, but for this simple example, it would only obscure the point. To do this, edit your style sheet like so:
   ul {
   list-style:none;
   margin:0;
   padding:0;
   }

4. 

   Make the first unordered list appear horizontally, and the nested unordered list appear vertically underneath it, by editing your style sheet with the following code:
   ul li {
   float:left;
   }
   ul li ul li {
   clear:both;
   }

5. 

   Hide the nested list from appearing automatically:
   li ul {
   display:none;
   }

6. 

   Make the nested list appear when you hover over the list item that contains it:
   li:hover > ul {
   display:block;
   }

7. 

   Add links inside the list items, and style the list to fit with the scheme of your website. Pad each list item to make things more readable, create a border around each item, or change each item's background color, whatever works for you.

Tips & Warnings

• If you don't know how to edit HTML or CSS files, many web companies provide drop-down lists as part of some of their pre-made designs and themes. You can create a website for free at Blogger.com or Wordpress.com that can have drop-down menus built in.