Dropdown Menus
Multi-Select Dropdown Menus
<ul class="o-list-menu">
<li class="o-list-menu__item c-dropdown__button"><a>Filter by Program</a>
<ul class="o-list-menu c-dropdown">
<li class="o-list-menu__item o-list-menu__item--selected"><a>Sundance Film Festival</a></li>
<li class="o-list-menu__item"><a>Feature Film</a></li>
<li class="o-list-menu__item o-list-menu__item--selected"><a>Documentary Film</a></li>
<li class="o-list-menu__item"><a>Theatre</a></li>
</ul>
</li>
</ul>
<ul class="o-list-menu">
<li class="o-list-menu__item c-dropdown__button"><a>Filter by Event Type</a>
<ul class="o-list-menu c-dropdown">
<li class="o-list-menu__item o-list-menu__item--selected"><a>Screening</a></li>
<li class="o-list-menu__item"><a>Party</a></li>
<li class="o-list-menu__item o-list-menu__item--selected"><a>Reception</a></li>
<li class="o-list-menu__item"><a>Workshop</a></li>
</ul>
</li>
</ul>
Bordered Multi-select Dropdown Menu (Used In Forms)
<ul class="o-list-menu">
<li class="o-list-menu__item c-dropdown__button c-dropdown__button--border"><a>Filter by Program</a>
<ul class="o-list-menu c-dropdown">
<li class="o-list-menu__item o-list-menu__item--selected"><a>Sundance Film Festival</a></li>
<li class="o-list-menu__item"><a>Feature Film</a></li>
<li class="o-list-menu__item o-list-menu__item--selected"><a>Documentary Film</a></li>
<li class="o-list-menu__item"><a>Theatre</a></li>
</ul>
</li>
</ul>
Bordered Single-select Dropdown Menu
<ul class="o-list-menu">
<li class="o-list-menu__item c-dropdown__button c-dropdown__button--border"><a>Filter by Program</a>
<ul class="o-list-menu c-dropdown">
<li class="o-list-menu__item o-list-menu__item--selected"><a>Sundance Film Festival</a></li>
<li class="o-list-menu__item"><a>Feature Film</a></li>
<li class="o-list-menu__item o-list-menu__item--selected"><a>Documentary Film</a></li>
<li class="o-list-menu__item"><a>Theatre</a></li>
</ul>
</li>
</ul>
Bordered Single-select Dropdown Menu (Used In Forms)
<div class="o-form__dropdown-container">
<select name="favoritefilm" id="favoritefilm">
<option>Whiplash</option>
<option>Fruitvale Station</option>
<option>Swiss Army Man</option>
</select>
<label for="favoritefood">Favorite Sundance Film</label>
</div>