Skip to main content

下拉菜单(Dropdown)

鼠标悬停触发#


<div class="dropdown dropdown--hoverable">  <button class="button button--primary">Hover Me</button>  <ul class="dropdown__menu">    <li>      <a class="dropdown__link" href="#url">        Home      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Profile      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Settings      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Help      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Logout      </a>    </li>  </ul></div>

点击触发#


<div class="dropdown">  <button class="button button--secondary" data-toggle="dropdown">    Click Me  </button>  <ul class="dropdown__menu">    <li>      <a class="dropdown__link" href="#url">        Home      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Profile      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Settings      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Help      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Logout      </a>    </li>  </ul></div>

Right-Aligned#


<div class="dropdown dropdown--right">  <button class="button button--info" data-toggle="dropdown">    Right-Aligned Long Children  </button>  <ul class="dropdown__menu">    <li>      <a class="dropdown__link" href="#url">        This is a very long item      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        And so is this item      </a>    </li>    <li>      <a class="dropdown__link" href="#url">        Who are you kidding, I&#x27;m the longessssssssst!      </a>    </li>  </ul></div>