Dropdown

You can add a divider with the <li class="divider"></li> tag.

• one
• two
• three

<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

You can use button groups for drop-down.

• one
• two
• three

<!-- Dropdown Trigger -->
<div class="div btn-group">
  <a href="#!" class="waves-effect waves-light btn">Just Button</a>
  <a href="#!" class="waves-effect waves-light btn dropdown-button" data-activates='dropdown2'><span class="mdi-navigation-expand-more"></span></a>
</div>

<!-- Dropdown Structure -->
<ul id='dropdown2' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>

The default behavior of dropdown is to activate on click. To have it activate on a hover, you can pass that as an option in HTML as shown below.

• one
• two
• three

<a class='dropdown-button btn' data-constrainwidth="false" data-hover="true" data-induration="500" data-outduration="300" href='#' data-activates='dropdown1'>Drop Me!</a>