Skip to content

Instantly share code, notes, and snippets.

@interglobalmedia
Created December 11, 2015 04:09
Show Gist options
  • Save interglobalmedia/d75febaea7bee2e6c415 to your computer and use it in GitHub Desktop.
Save interglobalmedia/d75febaea7bee2e6c415 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
// ----
// libsass (v3.2.5)
// ----
nav {
background: #1888c7;
padding: 5px;
margin-bottom: 20px;
ul {
padding: 0;
ul {
display: none;
position: absolute;/* awesome trick for dropdown to be in front of content. Giving me ideas for toggling the dropdown using jQuery as well.*/
background: #1888c7;
padding-top: 10px;/* Padding makes sure that the dropdown doesn't disappear because still inside the element, but if I use margin, then it disappears. */
}
}
}
/* Style Menu on Hover */
li:hover ul {
display: block;
}
li a:hover {
display: block;
}
/* Style Menu Li */
nav > ul > li {
display: inline-block;
margin: 0 10px;
vertical-align: top;
width: 100px;
}
li {
list-style: none;
}
nav {
background: #1888c7;
padding: 5px;
margin-bottom: 20px;
}
nav ul {
padding: 0;
}
nav ul ul {
display: none;
position: absolute;
/* awesome trick for dropdown to be in front of content. Giving me ideas for toggling the dropdown using jQuery as well.*/
background: #1888c7;
padding-top: 10px;
/* Padding makes sure that the dropdown doesn't disappear because still inside the element, but if I use margin, then it disappears. */
}
/* Style Menu on Hover */
li:hover ul {
display: block;
}
li a:hover {
display: block;
}
/* Style Menu Li */
nav > ul > li {
display: inline-block;
margin: 0 10px;
vertical-align: top;
width: 100px;
}
li {
list-style: none;
}
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment