@charset "utf-8";
/* CSS Document */

Home » Scripts and Tricks » Drop Down Menu
Simple Drop-Down Menu v2.0
It is a One Level Drop-Down Menu with Timeout effect.

If you are looking for advanced script, see the Multi-Level Drop-Down Menu based on simple treelike unordered list.

Internet has a lot of scripts with the name "Drop Down Menu". One day I needed to make such menu for my site. I have rummaged a heap of sites and archives with scripts. And not found what I looked for. On the Net scripts shared on two variants. The first - utterly worthless scripts. The second - too complex heap up and chargeable. 

And I just wrote this simple script:

Sample
This menu can be located anywhere on the page: 
Home 
HTML Drop Down
 
DHTML Menu
 
JavaScript DropDown
 
Cascading Menu
 
CSS Horizontal Menu
 Download 
ASP Dropdown
 
Pulldown Menu
 
AJAX Drop Submenu
 
DIV Cascading Menu
 Order 
Visa Credit Card
 
Paypal
 Help 
Download Help File
 
Read online
 Contact 
E-mail
 
Submit Request Form
 
Call Center
 HTML Code
HTML code is very simple and without tables. It used unordered list for menu items and hidden layers near own parent items.

Parent items and hidden layers have unique identifiers. Also these have event handlers onmouseover and onmouseout:

<ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Download</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>
CSS Code
<li> tag have loat: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;

Everything else is usual decoration:

#nav
{background-image:url(images/b.gif)
}


#sddm
{
	margin: 5;
	padding: 1;
	z-index: 3000
}

#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 14px arial}

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 5px 10px;
	width: 100px;

	color: #FFd;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #333}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 5px 10px;
	background: #000;
	border: 0px solid #666;
	color: #CCCCCC;
	font: 14px arial
	}
	

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #000;
		color: #fff;
		font: 14px arial}

	#sddm div a:hover
	{	background: #666;
		color: #FFF}

/*- Menu 2--------------------------- */
	
#menu2 {
	width: 200px;
	margin: 10px;
	border-style: solid solid none solid;
	border-color: #D8D5D1;
	border-size: 1px;
	border-width: 1px;
	}
	
#menu2 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu2 li a:link, #menu2 li a:visited {
	color: #74644D;
	display: block;
	background:  url(images/menu2.gif);
	padding: 8px 30px 0 30px;
	}
	
#menu2 li a:hover {
	color: #74644D;
	background:  url(images/menu2.gif) 0 -32px;
	padding: 8px 31px 0 32px;
	font-weight: bold;
	}