Skip to content

Instantly share code, notes, and snippets.

@daneden

daneden/dabblet.css

Created June 25, 2012 14:11
Show Gist options
  • Save daneden/2988873 to your computer and use it in GitHub Desktop.
Save daneden/2988873 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-level dropdown menus
Raw
dabblet.css
/**
* Multi-level dropdown menus
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font: 100%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
.nav, .nav ul {
list-style: none;
letter-spacing: -.25em; /* Remove inline-block whitespace*/
}
.nav li, .nav a {
display: inline-block;
*display: inline;
zoom: 1;
letter-spacing: 0; /* Restore normal letter spacing */
white-space: nowrap;
}
/* Abstraction over, now onto the dropdown styles */
.drop li {
position: relative;
}
.drop a {
padding: .75em 1em;
background-color: #ddd;
}
.drop li > ul {
position: absolute;
left: -9999px;
top: 100%;
}
.drop li > ul li {
display: block;
}
.drop li:hover > ul {
left: 0;
}
.drop li > ul li > ul {
top: 0;
}
.drop li > ul li:hover > ul {
left: 100%;
}
Raw
dabblet.html
<h1>Multi-level dropdown menus</h1>
<ul class="drop nav">
<li><a href="#">Level one</a></li>
<li>
<a href="#">Level one</a>
<ul>
<li><a href="#">Level two</a></li>
<li>
<a href="#">Level two</a>
<ul>
<li><a href="#">Level three</a></li>
<li><a href="#">Level three</a></li>
<li>
<a href="#">Level three</a>
<ul>
<li><a href="#">Level four</a></li>
<li><a href="#">Level four</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Level one</a></li>
</ul>
Raw
settings.json
{"view":"separate","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