Skip to content

Instantly share code, notes, and snippets.

@pixleight

pixleight/dabblet.css

Created December 29, 2011 16:15
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 pixleight/1534781 to your computer and use it in GitHub Desktop.
Save pixleight/1534781 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
html {
background: #FFF;
min-height:100%;
}
#container {
width: 205px;
background: #EEE;
margin: 10px;
min-height: 500px;
}
ul.dropdown {
margin: 0;
padding: 0;
display: block;
width: auto;
list-style-type: none;
}
ul.dropdown li {
display: block;
background: #cabea6;
color: #012a33;
font-size: 14px;
padding: 10px;
line-height: 1em;
margin: 0 0 3px;
position: relative;
z-index: 1;
}
ul.dropdown li ul {
display: none;
margin: 0;
padding: 0;
list-style-type: none;
background: #cabea6;
z-index: 10;
width: 195px;
}
ul.dropdown li ul li {
padding: 0;
margin: 0;
}
ul.dropdown li ul li a {
display: block;
font-size: 12px;
color: #FFF;
line-height: 1em;
padding: 10px;
background: #a19275;
border-bottom: 1px solid #ddd3c3;
}
ul.dropdown li ul li a:hover {
background: #78684f;
color: #ddd3c3;
}
ul.dropdown li:hover ul {
position: absolute;
display: block;
z-index: 10;
top: 34px;
left: 5px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="container">
<ul class="dropdown">
<li>
I am looking for info on …
<ul>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
</ul>
</li>
<li>
I need help with …
<ul>
<li><a href="#">Heating My Home</a></li>
<li><a href="#">Paying My Utility Bills</a></li>
<li><a href="#">Finding Daycare for My Child</a></li>
<li><a href="#">Making Basic Home Repairs</a></li>
<li><a href="#">Financing Home Ownership</a></li>
<li><a href="#">Finding Temporary Housing</a></li>
</ul>
</li>
</ul>
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment