Skip to content

Instantly share code, notes, and snippets.

Created April 19, 2012 14:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/2421348 to your computer and use it in GitHub Desktop.
Save anonymous/2421348 to your computer and use it in GitHub Desktop.
BC dropdown menu using unordered lists
<style type="text/css">
/* Throw this in a stylesheet */
#nav {
background: none repeat scroll 0 0 #F9F9F9;
float: left;
margin: 0;
overflow: hidden;
width: auto;
}
#nav ul {
margin: 0;
overflow: auto;
padding: 0;
}
#nav ul li {
background: none repeat scroll 0 0 transparent;
display: inline;
float: left;
list-style: none outside none;
padding: 0;
}
#nav ul li.selected a:link, #nav ul li.selected a:visited, #nav ul li ul li.selected a:link, #nav ul li ul li.selected a:visited {
background: none repeat scroll 0 0 #F9F9F9;
}
#nav ul li a:link, #nav ul li a:visited, #nav ul li ul li a:link, #nav ul li ul li a:visited {
border: 1px solid #E8E8E8;
color: #333329;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
padding: 15px;
text-decoration: none;
text-transform: uppercase;
}
#nav ul li a:hover, #nav ul li a:active, #nav ul li ul li a:hover, #nav ul li ul li a:active {
color: #333329;
background: #0087e1;
}
#nav ul li ul {
background: none repeat scroll 0 0 #F9F9F9;
left: -999em;
position: absolute;
width: 10em;
z-index: 333;
}
#nav ul li:hover ul {
left: auto;
}
#nav ul li ul li {
border-top: 1px solid #DDDDDD;
display: block;
float: none;
}
#nav ul li.selected ul li a:link, #nav ul li.selected ul li a:visited {
background: none repeat scroll 0 0 transparent;
}
#nav ul li.selected ul li a:active, #nav ul li.selected ul li a:hover {
background: none repeat scroll 0 0 #B6B6B6;
color: #333329;
}
#nav ul li ul li.selected a:link, #nav ul li ul li.selected a:visited {
background: none repeat scroll 0 0 #999999;
color: #333329;
}
#nav ul li ul li a:link, #nav ul li ul li a:visited {
color: #333329;
display: block;
font-size: 13px;
padding: 5px 10px;
text-decoration: none;
}
#nav ul li ul li a:hover, #nav ul li ul li a:active {
background: none repeat scroll 0 0 #0087e1;
color: #333329;
}
</style>
<!-- Wrap Dynamic menu in div -->
<div id="nav"> {module_menu,xxxxxx} </div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment