Header Dropdown Menu Blueprint

header-dropdown-menu-blueprint

Jade:
ul.header__menu
  li.header__menu__item
    a.header__menu__link(href="#{js}") home
  li.header__menu__item
    a.header__menu__link(href="#{js}") about
  li.header__menu__item
    a.header__menu__link(href="#{js}") services
  li.header__menu__item
    a.header__menu__link(href="#{js}") portfolio
    ul.header__submenu
      li.header__submenu__item
        a.header__submenu__link(href="#{js}") portfolio 2 column page
      li.header__submenu__item
        a.header__submenu__link(href="#{js}") portfolio 2 column page
      li.header__submenu__item
        a.header__submenu__link(href="#{js}") portfolio 2 column page
  li.header__menu__item
    a.header__menu__link(href="#{jv}") blog
  li.header__menu__item
    a.header__menu__link(href="#{jv}") features
  li.header__menu__item
    a.header__menu__link(href="#{jv}") contacts

Stylus:
.header__menu
  margin 0
  padding 0
  list-style-type none
  clearfix()

  &__item
    float left
    position relative
    &:hover .header__submenu
      display block
    &:hover .header__menu__link
      color #000

  &__link
    text-decoration none

.header__submenu
  margin 0
  padding 0
  list-style-type none
  absolute top 100% left 0
  display none

  &__item
    display block
    min-width 200px

  &__link
    text-decoration none
    &:hover
      color #000