public
Last active

Dropdown Menu Example

  • Download Gist
Menu.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
#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
Scheme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
<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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.