CSS3 Drodown menu
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
li {
position: relative;
float: left;
background: #1bc2a2;
a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
&:hover {
background: #2c3e50;
}
}
}
}
li ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #1bc2a2;
}
li:hover li a:hover {
background: #2c3e50;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
display: table;
}
ul:after { clear: both; }
html
body
ul
li
a(href='#') Home
li
a(href='#') Front End Design
ul
li
a(href='#') HTML
li
a(href='#') CSS
ul
li
a(href='#') Resets
li
a(href='#') Grids
li
a(href='#') Frameworks
li
a(href='#') JavaScript
ul
li
a(href='#') Ajax
li
a(href='#') jQuery
li
a(href='#') WordPress Development
ul
li
a(href='#') Themes
li
a(href='#') Plugins
li
a(href='#') Custom Post Types
ul
li
a(href='#') Portfolios
li
a(href='#') Testimonials
li
a(href='#') Options
li
a(href='#') About Us