<nav class="navbar navbar-inverse" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="https://www.minwt.com">梅問題</a>
			</div>

			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li><a href="#">選項1</a></li>
					<li><a href="#">選項2</a></li>
					<li><a href="#">選項3</a></li>
					<li><a href="#">選項4</a></li>
					<li><a href="#">選項5</a></li>
					<li><a href="#">選項6</a></li>
					<li><a href="#">選項7</a></li>
					<li><a href="#">選項8</a></li>
					<li><a href="#">選項9</a></li>
					<li><a href="#">選項10</a></li>
					<li><a href="#">選項11</a></li>
					<li><a href="#">選項12</a></li>
					<li><a href="#">選項11</a></li>
					<li><a href="#">選項12</a></li>
					<li><a href="#">選項13</a></li>
					<li><a href="#">選項14</a></li>
					<li><a href="#">選項15 <span class="caret"></span></a>
						<ul>
							<li><a href="#">次選1</a></li>
							<li><a href="#">次選2</a></li>
							<li><a href="#">次選3</a></li>
						</ul>
					</li>
					<li><a href="#">選項16</a></li>
					<li><a href="#">選項17</a></li>
					<li><a href="#">選項18</a></li>
					<li><a href="#">選項19 <span class="caret"></span></a>
						<ul>
							<li><a href="#">次選1</a></li>
							<li><a href="#">次選2</a></li>
							<li><a href="#">次選3</a></li>
							<li><a href="#">次選4</a></li>
							<li><a href="#">次選5</a></li>
							<li><a href="#">次選6</a></li>
							<li><a href="#">次選7</a></li>
							<li><a href="#">次選8</a></li>
							<li><a href="#">次選9</a></li>
						</ul>
					</li>
					<li><a href="#">選項20</a></li>
					<li><a href="#">選項21</a></li>
				</ul>
			</div>
		</div>
	</nav>

ul{
					padding:0;
					margin:0;
					list-style: none;
				}
			  ul.nav>li {
			    display: inline-block;
			    float: none;
				}
				ul.nav>li>a:hover,
				ul.nav>li>a:focus{
					background:#000 !important;
				}
				
				ul.nav>li>a{color:#fff;}
				ul.nav>li ul{
					padding:10px;
					background:#222;
					position: absolute;
					z-index:100;
					top:50px;
					left:-50%;
					width:200px;
				}
				ul.nav>li ul>li>a{
					color:#fff;
					display:block;
					padding: 10px;
    			border-bottom: solid 1px #313131;
				}
				.navbar-nav{float:none;}
				.caret{
					margin-right:5px;
					margin-left:5px; 
					border-left: 9px solid transparent;
    			border-right: 9px solid transparent;
    			border-top: 9px solid #fff;
    		}
				#nav-menu{
					margin-top:-72px;
				}
				#nav-menu .scroll {
					overflow-x: auto;
				  white-space: nowrap;
				  -webkit-overflow-scrolling: touch;
				  -ms-overflow-style: -ms-autohiding-scrollbar;
				  
				}
				.scroll::-webkit-scrollbar {
  				display: none;
  			}
				@media(max-width:480px){
					#nav-menu{
						width:220px;
					}
					ul.nav>li ul{
						top:40px;
					}
				}

$(function(){
			$('.navbar').after('<div id="nav-menu" class="container"></div>');
			$('#nav-menu').append('<div class="collapse navbar-collapse"></div>');
			$('.navbar-collapse').append('<div class="scroll"></div>');
			$('.scroll').append($('.navbar-nav').clone(true));
			$('#nav-menu .scroll>ul>li>ul').hide();

			$('.navbar>div>.navbar-collapse').remove();
			
			$('.caret').click(function(){
				//alert($(this).parent().next().is(":hidden"));
				var visible = $(this).parent().next().is(":hidden");

				$('#nav-menu .scroll>ul>li>ul').hide();
				var total = $(this).parent().next().height();

				if($('#nav-menu .scroll').height()==50){
					$(this).parent().next().show();
					$('#nav-menu .scroll').css('height',total+80);
				}else{
					//$('#nav-menu').css('height',30);
					$('#nav-menu .scroll').css('height','auto');
				}
				if(visible == true){
					$(this).parent().next().show();
					$('#nav-menu .scroll').css('height',total+80);
				}
			});
		});