Drop Down Menu Basics

HTML & CSS
1

I want to learn how to do a drop down menu, and have found the following basic outline in a book. I have tried inserting my html pages in the “x” areas, but only get an ul list, not a drop down.

html>
<head>
<title>Drop2</title>
</head>
<body>
<div id=“listcontainer” class=“clearfix”>
<ul>

&lt;li&gt;&lt;a href="#"&gt;Customers&lt;/a&gt;
	&lt;ul&gt;&lt;!-- drop down menu items --&gt;

		&lt;li&gt;&lt;a href="#"&gt;Our Services&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
		&lt;li&gt;&lt;a href="#"&gt;Support&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/li&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

The example in the book of course repeats the above with multiple categories, but I cannot seem to get the single one shown above correct.
I basically want the category to be articles, and the drop downs the names of the articles. Hope I am stating my problem correctly.

2

You can’t create a drop-down menu with HTML only, you also need CSS (and possibly, but not necesarrily, JavaScript if you want animations).

Please take a look at this tutorial.

3

This is a good tutorial, mostly because it relies on CSS and HTML to create the dropdown (though it does use a small JavaScript file to make it function), and it’s easy to restyle (the demo is quite ugly :)). A lot of dropdowns rely on JavaScript ([URL=“http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/”]many use jQuery) to function properly.

Eric Meyer gave us a pure-CSS dropdown (or more accurately, a flyout) menu some years back, though it doesn’t work in IE6. Stu Nicholls [URL=“http://www.cssplay.co.uk/menus/final_drop.html”]created a dropdown with CSS and HTML that he says works in IE6, though some of his menus are rather tricky.