Skip to content

Instantly share code, notes, and snippets.

@markbrown4
Created November 3, 2012 22:28
Show Gist options
  • Save markbrown4/4009127 to your computer and use it in GitHub Desktop.
Save markbrown4/4009127 to your computer and use it in GitHub Desktop.
goofy nav
/**
* goofy nav
*/
#main-menu {
width:550px;
position:relative;
float:right;
list-style: none;
margin: 0;
padding: 0;
}
#main-menu li {
float:left;
margin: 0;
padding: 0;
position: relative;
}
#main-menu li a {
display:block;
text-decoration:none;
padding:8px;
color:#000;
background-color:#FC0;
transition: background .2s ease
}
#main-menu li ul {
position:absolute;
white-space: nowrap;
z-index:999;
left: 0;
margin: 0;
padding: 0;
}
#main-menu li li {
display: block;
float: none;
opacity: 0;
height: 0;
overflow: hidden;
}
#main-menu li:hover a {
background: #C60;
}
#main-menu li:hover li { opacity: 1; height: auto; }
#main-menu li li:nth-child(1) { transition: opacity .1s ease 0 }
#main-menu li li:nth-child(2) { transition: opacity .1s ease .1s }
#main-menu li li:nth-child(3) { transition: opacity .1s ease .2s }
#main-menu li li:nth-child(4) { transition: opacity .1s ease .3s }
#main-menu li li:nth-child(5) { transition: opacity .1s ease .4s }
#main-menu li li:nth-child(6) { transition: opacity .1s ease .5s }
<div id="navbar">
<ul id="main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Members</a>
<ul>
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 2</a></li>
<li><a href="#">Sub item 3</a></li>
<li><a href="#">Sub item 4</a></li>
<li><a href="#">Sub item 5</a></li>
<li><a href="#">Sub item 6</a></li>
</ul>
</li>
<li><a href="#">Events</a>
<ul>
<li><a href="#">Sub item 3</a></li>
<li><a href="#">Sub item 4</a></li>
</ul>
</li>
<li><a href="#">Publications</a>
<ul>
<li><a href="#">Sub item 5</a></li>
<li><a href="#">Sub item 6</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment