如何在 Twitter Bootstrap 中建立懸停啟動的下拉式選單？

Twitter Bootstrap 的懸停下拉選單

使用Twitter 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;
  }
}

用於隱藏導航箭頭的CSS

Bootstrap 3：

刪除HTML 來自.dropdown-toggle 錨點

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
</a>

Bootstrap 2 及更低版本：

使用此CSS 選擇器和程式碼定位並刪除箭頭：

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

使用此CSS 選擇器和程式碼定位並刪除箭頭：

理解這些CSS 元素的工作原理將增強您自訂Bootstrap菜單以滿足您的特定需求的能力。

以上是如何在 Twitter Bootstrap 中建立懸停啟動的下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！