如何为引导程序菜单启用悬停事件？

Question

我实现了一个bootstrap响应丰富的菜单，它工作正常。 它适用于Click事件，我的问题是：如何将其更改为Hover事件？
所有引导程序菜单都有此问题。 bootstrap对此没有任何支持？ 这是我使用的菜单： http://geedmo.github.io/yamm/ 我的问题解决了：

<style>
    li.dropdown:hover .dropdown-menu {
        display: block;
    }

    li.dropdown:hover .dropdown-toggle {
        color: #555;
        background-color: #e5e5e5;
    }
</style>

但是出现了一个新问题，当我缩小浏览器时，子菜单显示在菜单的末尾，并且它不合适：/

Answer 1

将此样式添加到您的页面。

<style>
    li.dropdown:hover .dropdown-menu{display:block}
    li.dropdown:hover .dropdown-toggle{color:#555; background-color:#e5e5e5}
</style>

第一个将启用鼠标悬停下拉菜单，第二个将更改菜单标题颜色（为页面选择合适的颜色）。

Answer 2

尝试使用此HTML，JS和CSS

CSS

$(document).ready(function() {
function navbarSubmenu(width) {
			if (width > 767) {
				$('.navbar-custom .navbar-nav > li.dropdown').hover(function() {
					var MenuLeftOffset  = $('.dropdown-menu', $(this)).offset().left;
					var Menu1LevelWidth = $('.dropdown-menu', $(this)).width();
					if (width - MenuLeftOffset < Menu1LevelWidth * 2) {
						$(this).children('.dropdown-menu').addClass('leftauto');
					} else {
						$(this).children('.dropdown-menu').removeClass('leftauto');
					}
					if ($('.dropdown', $(this)).length > 0) {
						var Menu2LevelWidth = $('.dropdown-menu', $(this)).width();
						if (width - MenuLeftOffset - Menu1LevelWidth < Menu2LevelWidth) {
							$(this).children('.dropdown-menu').addClass('left-side');
						} else {
							$(this).children('.dropdown-menu').removeClass('left-side');
						}
					}
				});
			}
		}
  });

.navbar-custom .dropdown-toggle:after {
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f107";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu{display:block}
  .navbar-custom .open > .dropdown-menu {
    visibility: visible;
    opacity: 1;
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-custom navbar-transparent navbar-fixed-top one-page" role="navigation">
<div class="navbar-collapse collapse in" id="custom-collapse" aria-expanded="true">
			<ul class="nav navbar-nav navbar-right mnCh">

				
					<li class="current">
						<a href="/#" title="Home">Home</a>
						
					</li>
				
					<li class="link">
						<a href="/#" title="About us">About us</a>
						
					</li>
				
					<li class="link dropdown">
						<a href="/#" title="Collection" class="dropdown-toggle binded" data-toggle="dropdown">Collection</a>
						
							<ul class="dropdown-menu">
								
									<li><a href="/#">Collection 1</a></li>
								
									<li><a href="/#">Collection 2</a></li>
								
									<li><a href="/#">Collection 3</a></li>
								
									<li><a href="/#">Collection 4</a></li>
								
							</ul>
						
					</li> 
					<li class="link">
						<a href="/#" title="Store">Store</a>
						
					</li>
				
					<li class="link dropdown">
						<a href="/#" title="Press &amp; News" class="dropdown-toggle binded" data-toggle="dropdown">Press &amp; News</a>
						
							<ul class="dropdown-menu">
								
									<li><a href="/#">Press</a></li>
								
									<li><a href="/#">News</a></li>
								
							</ul>
						
					</li>
				
					<li class="link">
						<a href="/#" title="Download">Download</a>
						
					</li>
				

				<li class="dropdown">
					<a href="/#" class="dropdown-toggle binded" data-toggle="dropdown">
						Languages
					</a>
					<ul class="dropdown-menu">
						 
						<li><a href="/en">English</a></li>
						<li><a href="/it">Italiano</a></li>
						 
					</ul>
				</li>

			</ul>
		</div>
  </nav>