Horizontal Dropdown Menu via pseudo-element before

Horizontal Dropdown Menu via pseudo-element before

Jade:
// menu
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
    // 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.menu__item
    a.menu__link(href="#") menu item
  li.menu__item
    a.menu__link(href="#") menu item

Stylus:
.menu
  margin 0
  padding 0
  list-style-type none
  center(80%)
  clearfix()
  box-shadow 0 1px 0 rgba(0,0,0,.4)

  &__item
    float left
    margin 0 0 0 10px
    position relative
    &:first-child
      margin-left 0
    &:hover .menu__link
      color rgba(0, 0, 0, .5)
    &:hover .submenu
      display block

  &__link
    display block
    height 30px
    line-height 30px
    padding 0 20px
    text-decoration none
    white-space nowrap

// SUBMENU

.submenu
  list-style-type none
  margin 0
  padding 0
  absolute top 40px left 0
  z-index 999
  box-shadow 0 0 1px rgba(0,0,0,1)
  display none

  &:before
    content ''
    display block
    width 100%
    height 10px
    absolute top -10px left 0
    z-index 999

  &__item
    display block
    min-width 150px
    box-shadow 0 1px 0 rgba(0,0,0,.2)

  &__link
    display block
    height 30px
    line-height 30px
    text-decoration none
    white-space nowrap
    &:hover
      color rgba(0, 0, 0, .5)