將鼠標懸停在Twitter Bootstrap中的下拉菜單上

Question

當您將鼠標懸停在使用Twitter Bootstrap 3實現的下拉菜單上時，如何寫出代碼，該下拉菜單顯示出來，用戶可以單擊展開的下拉菜單的鏈接？

我編寫了以下HTML：

        <nav>
            <ul id="mainMenu">
                <li><a href="/">Home</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown">Blog<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/1">1</a></li>
                        <li><a href="/2">2</a></li>
                    </ul>
                </div>
                </li>

            </ul>
        </nav>

以及以下CSS：

ul#mainMenu li {
    display: inline-block;
    padding: 3px;
    background-color: orange;
    border-radius: 5px;
    -webkit-transform: skewX(-6deg);
}

ul#mainMenu li:hover {
    background-color: green;
}

但是，當您將鼠標懸停在下拉菜單中的“ Blog菜單上時，下拉菜單不會展開，但是如果單擊它，菜單就會展開。

即使您擴展菜單，擴展菜單在布局上也很糟糕，因為擴展菜單中有多余的空白，這可能是由於我使其傾斜了一定程度（-6度）所致。

同樣，展開的菜單位於水平位置，而不是垂直位置。 我不知道為什么它水平放置，但是我可以修復它嗎？

謝謝。

[更新]由於某些原因，HTML代碼無法正確顯示。 現在，我必須檢查如何解決它，如果我知道如何解決它，我會做。 我在<pre><code>標記中寫了這些標記以供參考。

Answer 1

花了我一段時間才能找到它。 令人驚訝的是，如果您在Google周圍搜索，那么很多人會發布無窮無盡的無用信息！ 盡管我無法保證它在小型設備上的運行方式，但這種簡單的CSS對我有用。

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

Answer 2

您可以嘗試使用眾多與引導程序相關的插件，例如https://github.com/CWSpear/twitter-bootstrap-hover-dropdown嗎？

還是不是您要找的東西？

Answer 3

使用以下CSS可以同時切換和懸停菜單。

.dropdown:hover .dropdown-menu {
    display: block;
 }

這很簡單

Answer 4

如果您想要超輕量級的東西而無需任何插件或不必向代碼中添加更多屬性，那么請將此JS代碼放入頁面中，並且所有下拉列表現在都應該在懸停時打開：

<script>
var bMobile;  // true if in mobile mode

// Initiate event handlers
function init() {
  // .navbar-toggle is only visible in mobile mode
  bMobile = $('.navbar-toggle').is(':visible');
  var oMenus = $('.navbar-nav .dropdown'),
    nTimer;
  if (bMobile) {
    // Disable hover events for mobile
    oMenus.off();
  } else {
    // Set up menu hover for desktop mode
    oMenus.on({
      'mouseenter touchstart': function() {
        event.preventDefault();
        clearTimeout(nTimer);
        oMenus.removeClass('open');
        $(this).addClass('open');
      },
      'mouseleave': function() {
        nTimer = setTimeout(function() {
          oMenus.removeClass('open');
        }, 500);
      }
    });
  }
}
$(document).ready(function() {
  // Your other code to run on DOM ready...
  init();
});

$(window).resize(init);
</script>