Dropdown Menu Example

Menu.css

#menu {}
	#menu ul {
		position:relative; z-index:500;
		margin: 0 auto;
	}
		#menu li {
			float: left;
			list-style: none;
		}
		
		#menu ul ul.sub1 li a.current {
			font-weight: 700;
		}
			#menu li a.top_link {
				float: left;
				display: block;
				margin: 0 2px;
				font-size: 13px;
				font-weight: bold;
				color: #fff;
				text-decoration: none;
				padding: 9px 12px;
			}
			#menu li.top {display:block; float:left;}
			
			#menu li a.top_link:hover { background: #000; }
			#menu li:hover > a.top_link { background: #000; }
				
			#menu li.current a.top_link,
			#menu li.section a { background: #ff0; }

			/* NOTE IE6 has issues with using 4, break into 2  */
			#menu li.section:hover > a.top_link,
			#menu li.current:hover > a.top_link,
			#menu li.section:hover > a.top_link:hover,
			#menu li.current:hover > a.top_link:hover { background: #ff0; }
			#menu table { border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0; }

			#menu a:hover { visibility:visible; position:relative; z-index:200; }
			#menu li:hover { position:relative; z-index:200; }

			/* keep the 'next' level invisible by placing it off screen. */
			#menu ul ul { position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

			#menu ul ul.sub1 {width:auto;}
			#menu ul ul.sub1 li { clear: left; width: 100%; }
			#menu ul :hover ul { left:2px; top:33px; background: #eede01; white-space:nowrap; border: none; height:auto; z-index:300;}
			#menu ul :hover ul li { display:block;position:relative; background: #f00; font-weight:bold; width:200px; margin-left: 0;}
			#menu ul :hover ul li a {
				display:block;  
				clear: both; 
				font-size:12px; 
				background: #eede01;
				text-transform: none; 
				width: 100%; 
				padding: 6px 0px 4px 0;
				text-indent: 15px; 
				color:#4a891c; 
				text-decoration: none;
				line-height: 15px;
			}
			#menu ul :hover ul li a:hover {background:#4a891c; color:#fff; }

Menu.ss

<div id="menu">
	<!-- [if IE6]><div id="IE6"><![endif]-->
	
	<ul>
		<% control Menu(1) %>
			<% if LinkOrSection = section %>
				<li class="top $LinkingMode"><a href="$Link" class="top_link">$MenuTitle</a></li>
			<% else %>
				<% if Children %>
					<li class="top $LinkingMode"><a href="$Link" class="top_link">$MenuTitle<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]-->
					
						<ul class="sub1">
							<% control Children %>
								<li><a href="$Link" title="View more about $Title" class="fly $LinkingMode">$MenuTitle</a></li>
							<% end_control %>
						
						</ul>
					
						<!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
 				<% else %>     
 					<li class="top $LinkingMode"><a href="$Link" class="top_link">$MenuTitle</a></li>
				<% end_if %>
			<% end_if %>
		<% end_control %>
	</ul>
	<!-- [if IE6]></div><![endif]-->
</div>