There are a ton of examples on how to create vertical drop-down menus, but hardly any on how to create a completely horizontal drop-down menu. I messed around with this quite a bit until I got what I was looking for, and then, once again, I stripped it down to a minumum to make it easy to understand. Just wrap an unordered list with a div tag using id="hmenu".

From there you can add your own css styles to give it a nice look.

Following is the HTML and CSS code required to do it.

Demo of Horizontal Drop-Down Menu

<div id="hmenu">
<ul>
	<li><a href="example.com">Home</a>
		<ul>
			<li><a href="example.com">About Us</a></li>
			<li><a href="example.net">About Me</a></li>
		</ul>
    </li>
    <li><a href="index.php">MoBlog
    	<ul>
        	<li><a href="example.com">Today's Pics</a></li>
            <li><a href="example.net">Month's Pics</a></li>
            <li><a href="example.org">Year's Pics</a></li>
        </ul>
    </li>
    <li><a href="example.com">Quotes
    	<ul>
        	<li><a href="example.com">Funny</a></li>
            <li><a href="example.org">Serious</a></li>
            <li><a href="example.net">Introspective</a></li>
        </ul>
    </li>
</ul>
</div>

 

/* Written by: Javod Khalaj */

/* 	'list-style: none' removes the bullets, 
	margin and padding can be adjusted to desired quantities, but zero is a good starting point
	'width:100px' is used because otherwise any mouse-over interaction with the width of the page would cause the menu to display
*/
#hmenu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	width:100px;
}

/*	line-height separates the main navigation a specified distance. 
	Otherwise the navigation will be very tight against each other.
	'position: relative' helps line up the second navigation next to the corresponding first navigation.
*/
#hmenu ul li {
	line-height:30px;
	position: relative;
	float:none;
	width:auto;
}

/*	'left: 100px' pushes the second ul structure (secondary navigation) 100px away from the main ul (main navigation).
	'display: none' removes the visiblity of the secondary navigation (The element will generate no box at all).
	'position: absolute' lines up the second navigation next to the corresponding first navigation.
	'width: 600px' is the width for the second navigation. If it is made too small, the text will wrap.  
*/
#hmenu ul li ul {
	position: absolute;
	left: 100px;
	top:0px;
	display: none;
	width:600px;
}

/* 	this will change the display from none to block.
	essentially this makes the secondary navigation visible on mouseover.
*/
#hmenu li:hover ul { 
	display: block; 
}

/*	'padding-left:20px' separates the secondary menu from running into each other
*/
#hmenu ul li ul li{
	padding-left:20px;
	margin:0px;
	float:left;
	width:auto;
	text-align: center;
}