Horizontal Dropdown Menu via padding-bottom

Horizontal-Dropdown-Menu via padding-bottom

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
    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:

// MENU COLORS

endColor = #111
startColor = #444
shadowColor = #9c9c9c

// LINK COLORS

linkColor = #999
linkShadowColor = #000
linkHoverColor = #fafafa
linkEndColor = #0186ba
linkStartColor = #04acec

// RULES

.menu
.submenu
  list-style-type none
  margin 0

// MAIN MENU

.menu
  center(80%)
  padding 10px 0 0 0
  background-color endColor
  background linear-gradient(top, startColor, endColor)
  border-radius 50px
  box-shadow 0 2px 1px shadowColor
  clearfix()

  &__item
    float left
    padding 0 0 10px 0
    position relative

    &:hover > .submenu
      display block

    &:hover > .menu__link
      color linkHoverColor

  &__link
    float left
    height 25px
    padding 0 25px
    color linkColor
    text-decoration none
    text-transform uppercase
    font-weight 700
    font-size 12px
    line-height 25px
    text-shadow 0 1px 0 linkShadowColor
    transition all .2s

//SUBMENU

.submenu
  display none
  padding 0
  absolute top 35px left 0
  z-index 9999
  background-color startColor
  background linear-gradient(top, startColor, endColor)
  border-radius 5px

  &__item
    display block
    min-width 150px
    box-shadow 0 1px 0 endColor, 0 2px 0 #777

    &:first-child > .submenu__link
      border-radius 5px 5px 0 0

    &:first-child > .submenu__link:after
      content ''
      width 0
      height 0
      border-left 5px solid transparent
      border-right 5px solid transparent
      border-bottom 8px solid startColor
      absolute top -8px left 30px

    &:first-child > .submenu__link:hover:after
      border-bottom-color linkStartColor

    &:last-child > .submenu__link
      border-radius 0 0 5px 5px

    &:last-child
      box-shadow none

  &__link
    display block
    height auto
    padding 10px
    line-height 1
    white-space nowrap
    font-size 12px
    font-weight 700
    text-decoration none
    text-transform capitalize
    color linkColor
    text-shadow 0 1px 0 linkShadowColor
    transition all .2s

    &:hover
      color linkHoverColor
      background-color linkEndColor
      background linear-gradient(top, linkStartColor, linkEndColor)