Skip to content

Instantly share code, notes, and snippets.

@gearmobile

gearmobile/Horizontal Dropdown Menu via margin-top

Created May 30, 2015 19:25
Show Gist options
  • Save gearmobile/39bd2e33978a2917dc4d to your computer and use it in GitHub Desktop.
Save gearmobile/39bd2e33978a2917dc4d to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal Dropdown Menu via margin-top
Raw
Horizontal Dropdown Menu via margin-top
Jade:
ul.menu
li.menu__item
a.menu__link(href="#") menu item
li.menu__item
a.menu__link(href="#") menu item
li.menu__item
a.menu__link(href="#") menu item
li.menu__item
a.menu__link(href="#") menu item
//submenu
ul.submenu
li.submenu__item
a.submenu__link(href="#") submenu item
li.submenu__item
a.submenu__link(href="#") submenu item
li.submenu__item
a.submenu__link(href="#") submenu item
li.submenu__item
a.submenu__link(href="#") submenu item
li.menu__item
a.menu__link(href="#") menu item
//submenu
ul.submenu
li.submenu__item
a.submenu__link(href="#") submenu item
li.submenu__item
a.submenu__link(href="#") submenu item
li.submenu__item
a.submenu__link(href="#") submenu item
li.submenu__item
a.submenu__link(href="#") submenu item
li.menu__item
a.menu__link(href="#") menu item
li.menu__item
a.menu__link(href="#") menu item
Stylus:
*
box-sizing border-box
// MENU
.menu
.submenu
list-style-type none
margin 0
padding 0
.menu
center(80%)
box-shadow 0 1px 0 rgba(0,0,0,.5)
clearfix()
&__item
float left
&:hover .menu__link
color rgba(0,0,0,.9)
&:hover .submenu
left auto
&__link
float left
height 40px
line-height 40px
padding 0 20px
text-decoration none
// SUBMENU
.submenu
min-width 200px
position absolute
z-index 9999
margin-top 40px
left -9999em
&__item
display block
box-shadow 0 1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(0,0,0,.4)
&__link
display block
height 30px
line-height 30px
text-decoration none
&:hover
color rgba(0,0,0,.9)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment