<nav id="nav">
		<div class="navbar navbar-default" role="navigation">
			<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
				<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>
				</div>
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li><a href="https://www.minwt.com">選單1</a>
							<ul class="sub-menu">
								<li><a href="https://www.minwt.com">選單1-1</a></li>
								<li><a href="https://www.minwt.com">選單1-2</a></li>
								<li><a href="https://www.minwt.com">選單1-3</a>
									<ul class="sub-menu">
										<li><a href="https://www.minwt.com">選單1-3-1</a>
												<ul class="sub-menu">
													<li><a href="https://www.minwt.com">選單1-3-1-1</a></li>
													<li><a href="https://www.minwt.com">選單1-3-1-2</a></li>
													<li><a href="https://www.minwt.com">選單1-3-1-3</a>
															<ul class="sub-menu">
																<li><a href="https://www.minwt.com">選單1-3-1-3-1</a></li>
																<li><a href="https://www.minwt.com">選單1-3-1-3-2</a></li>
															</ul>
													</li>
												</ul>
										</li>
										<li><a href="https://www.minwt.com">選單1-3-2</a></li>
									</ul>
								</li>
								<li><a href="https://www.minwt.com">選單1-4</a></li>
							</ul>
						</li>
						<li><a href="https://www.minwt.com">選單2</a>
						<li><a href="https://www.minwt.com">選單3</a>
						<li><a href="https://www.minwt.com">選單4</a>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
		</div>
	</nav>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, .select_menu {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
			font-size: 100%;
			vertical-align: baseline;
			background:transparent;
			font-family:"微軟正黑體";
		}
		ol,
		ul {
			list-style: none;
		}
		ul.nav>li {
			position: relative;
		}
		ul.nav>li a:hover {
			text-decoration: none;
			background: #efefef; /*滑入選單底色*/
		}
		ul.nav>li ul>li{
			border-left: solid 1px #ccc;/*選單側邊線顏色*/
		}
		ul.nav>li>ul>li a{
			color: #333;/*選單連結顏色*/
			display: block;
			padding-top: 10px;
			padding-bottom: 10px;
			text-decoration:none;
		}
		ul.nav>li ul>li {border-bottom: solid 1px #ccc;} /*選單隔線顏色*/
		ul.nav>li ul>li:last-child{border-bottom:0;}
		ul.nav>li>ul li>ul.sub-menu {border-top: solid 1px #ccc;}/*子選單隔線顏色*/
		ul.nav>li>ul.sub-menu li>ul.sub-menu{display:none;}
		ul.nav>li ul {padding-left:20px;}/*階層式向後退的像素*/
		ul.nav>li ul>li>a:before{
			font-family: 'FontAwesome';
			content: '\f105';
			padding-right:7px;
			padding-left:7px;
			font-size:10px;
		}
		/*桌機*/
		@media(min-width:768px) {
			ul>li>a>b.arrow:after {
				font-family: 'FontAwesome';
				content: '\f078';
				font-size: 12px;
				position: absolute;
				right: 0;
			}
			ul>li>ul>li>a>b.arrow:after {
				font-family: 'FontAwesome';
				content: '\f078';
				font-size: 15px;
				position: absolute;
				top:0;
				right: 0;
				padding:10px 15px;
			}
			ul>li>ul>li>a>b.on:after {
				font-family: 'FontAwesome';
				content: '\f00d';
			}
			ul.nav>li:hover>a+ul {
				visibility: visible;
				opacity: 1;
			}
			ul.nav>li>ul.sub-menu {
				position: absolute;
				top: 50px;
				left: 0;
				z-index: 9999;
				background: #fff;
				width: 20vw;
				text-align: left;
				border-left: solid 1px #ededed;
				border-bottom: solid 1px #ededed;
				border-right: solid 1px #ededed;
				box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.3);
				opacity: 0;
				visibility: hidden;
				-webkit-transition: all .5s;
				transition: all .5s;
			}
		}
		/*手機*/
		@media(max-width:768px) {
			b.arrow:after {
				font-family: 'FontAwesome';
				content: '\f078';
				position: absolute;
				top: 3px;
				right: 0;
				padding: 10px 20px 10px 40px;
			}
			a.dropdown+ul {
				display: none;
			}
			b.on:after {
				font-family: 'FontAwesome';
				content: '\f00d';
			}
			ul.nav>li>a {border-bottom: solid 2px #ccc;}/*選單隔線顏色*/
			ul.nav>li:last-child>a {border-bottom: 0;}			
			ul.nav>li>ul.sub-menu {
				border-bottom: solid 2px #ccc;/*子選單隔線顏色*/
			}
		}	
$(function () {
			var DROPDOWN = 'dropdown'
			var ON = 'on'
			var SLIDETOGGLE_SPEED = 'slow'
			var ARROW = '<b class="arrow"></b>'
			var $nav = $('ul.nav')
			$nav.find('li>ul').prev().addClass(DROPDOWN).append(ARROW)
			$nav.find('li>a>b').click(function (event) {
				event.preventDefault();
				$(this).toggleClass(ON);
				$(this).parent().next().slideToggle(SLIDETOGGLE_SPEED);
			});

			$(window).resize(function () {
				if($(window).width()>768){
					$nav.find('li a b').removeClass(ON);
					$nav.find('.sub-menu').css('display', '');
				}
			});
		});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js