materialize CSS如何实现下拉菜单（）

本文概述 Materialize CSS提供了一个下拉功能, 允许用户从列表中的一组给定值中选择一个值。要将下拉列表添加到任何按钮, 必须确保data-target属性与id在< ul> 标记中。
下拉菜单中使用的主要类和属性是：

的下拉内容类用于标识应将哪个< ul> 标记用作Materialize下拉组件。
的数据激活属性用于指定下拉< ul> 元素的ID.

语法如下：
的HTML

< !-- Dropdown Trigger --> < h5 > < a class = 'dropdown-button btn green' href = 'https://www.lsbin.com/#' data-activates = 'dropdown1' > Drop Me! < i class = "large material-icons" > arrow_drop_down < / i > < / a > < / h5 >

在下拉列表中, 可以添加以下元素：

通过使用分频器类。可以将其添加到空的< li> 标记中以显示分隔符。
通过使用添加图标物质图标使用< i> 标记的类。可以指定要使用的图标, 该图标将显示在列表项的文本旁边。

例子：
的HTML

< !DOCTYPE html> < html > < head > < !--Import Google Icon Font--> < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" > < !-- Compiled and minified CSS --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" > < script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js" > < / script > < !-- Let the browser know that the website is optimized for mobile --> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < / head > < body > < h4 > Dropdown in Materialize:< / h4 > < !-- Dropdown Trigger --> < h5 > < a class = 'dropdown-button btn green' href = 'https://www.lsbin.com/#' data-activates = 'dropdown1' > Drop Me! < i class = "large material-icons" > arrow_drop_down < / i > < / a > < / h5 > < !-- Dropdown Structure --> < ul id = 'dropdown1' class = 'dropdown-content' > < !-- Define the links in the dropdown --> < li > < a href = "https://www.lsbin.org/materialize-css-collections/?ref=rp" > Collections < / a > < / li > < li > < a href = "https://www.lsbin.org/materialize-css-icons/?ref=rp" > Icons < / a > < / li > < !-- Define a divider --> < li class = "divider" > < / li > < li > < a href = "https://www.lsbin.com/#!" > Table< / a > < / li > < !-- Define a list item with an icon --> < li > < a href = "https://www.lsbin.com/#!" > < i class = "material-icons" > view_module < / i > Home < / a > < / li > < / ul > < !-- Compiled and minified JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" > < / script > < / body > < / html >

【materialize CSS如何实现下拉菜单（）】输出如下：