Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
Dropdown Menu Example
#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 {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 {
clear: both;
background: #eede01;
text-transform: none;
width: 100%;
padding: 6px 0px 4px 0;
text-indent: 15px;
text-decoration: none;
line-height: 15px;
#menu ul :hover ul li a:hover {background:#4a891c; color:#fff; }
<div id="menu">
<!-- [if IE6]><div id="IE6"><![endif]-->
<% 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 %>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<% else %>
<li class="top $LinkingMode"><a href="$Link" class="top_link">$MenuTitle</a></li>
<% end_if %>
<% end_if %>
<% end_control %>
<!-- [if IE6]></div><![endif]-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.