Twitter Bootstrap 中的懸停激活下拉選單

許多用戶更喜歡將Bootstrap 選單懸停時下拉，從而無需顯式點擊。本文討論了懸停功能和刪除選單標題旁邊的箭頭圖示。

懸停啟動下拉選單

若要啟用懸停時自動下拉選單，請使用 CSS定位隱藏選單選項。將以下程式碼加入您的 CSS 中：

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

對於響應式設計，請將程式碼包裝在媒體查詢中：

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

刪除箭頭圖示

• Bootstrap 3：從.dropdown-toggle錨元素中刪除HTML 。
• Bootstrap 2 & Lower: 使用此 CSS 定位並刪除箭頭選擇器:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

透過合併這些 CSS 修改，您可以實現懸停激活的下拉式選單並消除箭頭圖標，從而增強用戶體驗並根據需要自訂 Bootstrap 選單。