Dropdowns

Global variables

$dropdown-class: "-drop" !global
$dropdown-z-index: 1000
$dropdown-background-default: #fff
$dropdown-border-default: #fff
$dropdown-border-width: 0px
$dropdown-border-style: solid
$dropdown-border-radius: 3px
$dropdown-arrow-size: 14px
$dropdown-arrow-border-width: 1px
$dropdown-content-padding-vertical: 15px
$dropdown-content-padding-horizontal: 15px
$dropdown-shadow: 0 3px 10px rgba(#000, .1)

Drop without content block.
Great with menus and other navigation stuff.
Drop with content block.
Great with text, information, pictures and other stuff.
Drop without content block.
Great with menus and other navigation stuff.
Drop with content block.
Great with text, information, pictures and other stuff.

Position of dropdowns. Arrows.

To set position of the dropdown relative to parent element use modifiers _top_, _bottom_, _left_ and _right_.

Use arrow widget -arrow.

Top
Bottom
Right
Left
Top
Bottom
Right
Left
Top
Bottom
Right
Left
Top
Bottom
Right
Left

Headers and contents.

Just add widget -header to the drop. And add several -contents.

Header
Dropdown Top
Footer
Header
Dropdown Bottom
Footer
Header
Dropdown Right
Header
Dropdown Left
Header
Dropdown Top
Footer
Header
Dropdown Bottom
Footer
Header
Dropdown Right
Header
Dropdown Left