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

如何編寫代碼，當您將鼠標懸停在使用Twitter Bootstrap 3實現的下拉菜單上時，下拉菜單出現，用戶可以點擊擴展下拉菜單的鏈接？將鼠標懸停在Twitter上的下拉菜單中引導

我寫了下面的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>標籤中爲您提供了信息。

來源

2013-11-01 Blaszard

如果你可以做一個小提琴我可以幫你，這是所有關於CSS – DaniP

你可以嘗試一個豐富的引導相關插件之一，如https://github.com/CWSpear/twitter-bootstrap-hover-dropdown？

或者你不是在找什麼？

來源

2013-11-01 20:41:57 ravb79

如果你想要的東西超輕量級的，而不需要任何插件或具有多個屬性添加到您的代碼，然後放到這個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>

來源

2014-01-25 13:04:11 10basetom

接過我有一段時間找到它。這真是太神奇了，如果你的谷歌周圍有人發佈無盡複雜的東西，那麼無法工作！這個簡單的CSS爲我工作，雖然我不能保證它在小設備上的表現如何。

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

來源

2014-02-13 21:08:12

使用下面的CSS同時爲菜單切換和懸停。

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

其簡單

來源

2014-07-07 09:57:34

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

回答

相關問題