<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', '');
}
});
});