/* 共用設定 */
.pc_browser {
	display: block;
}

.mobile_browser {
	display: none;
}

.menubar {
	background-color: rgb(109,109,109);
	font-size: 16px;
	font-weight: bold;
	text-align: left;
}

.menubar ul {list-style: none;}
.menubar, .menubar ul, .menubar li, .menubar a {
	margin: 0;
	padding: 0;
}

.menubar a {
	display: block;
	font-weight: bold;
	height: 32px;
	line-height: 32px;
	text-decoration:none;
	color: #fff;
	overflow: hidden;
}

/* 共用：1, 2, 3 層 LI，宣告定位 */
.menubar li {
	display: block;
	position: relative;
}

/* 共用：2, 3 層 UL，宣告定位，2 對 1，3 對 2 */
.menubarlv1 ul {
	position: absolute;
	display: none;
	}

/* ********************************************** */
/* 第一層 UL */
.menubar .menubarlv1 {
    background-color: #323232;
    display: inline-block;
    width: 100%;
}

/* 第一層 LI */
.menubar .menubarlv1 > li {
	float: left;
}

/* 第一層 A */
.menubar .menubarlv1 > li > span > a {
	padding:0px 10px;
}
/* 移到第一層的 LI，LI 所顯示的效果 */
.menubar .menubarlv1 > li:hover {
	background: #3190d7;
	border-top: 3px solid #3190d7;
	margin-top: -3px;
	border-radius: 3px 3px 0 0;
	z-index:98;
}
/* 觸發第一層的 LI 顯示第二層 UL */
.menubar .menubarlv1 > li:hover .menubarlv2 {
	display:block;
}
/* ********************************************** */
/* 第二層 UL */
.menubar .menubarlv2 {
	background: #3190d7;
	border-left: 1px solid #fff;
}
/* 第二層 LI */
.menubarlv2 > li {width: 220px;}

/* 第二層 A */
.menubarlv2 a {
    padding:0 12px 0 6px;
}

/* 移到第二層的 LI，LI 所顯示的效果 */
.menubar .menubarlv2 > li:hover {
	background: #009900;
	border-left: 5px solid #009900;
	margin-left: -5px;
	border-radius: 3px 0 0 3px;
	z-index:99;
}

/* 觸發第二層的 LI 顯示第三層 UL */
.menubar .menubarlv2 > li:hover .menubarlv3 {
	display:block;
}

/* ********************************************** */
/* 第三層 UL */
.menubar .menubarlv3 {
	background: #009900;
	margin-top: -32px;
	/*z-index: 999;*/
	margin-left: -10px
}

.menubarlv3 a {
    padding:0px 10px 0px 15px;
}


/* 第三層 LI */
.menubarlv3 > li {width: 221px;}

/* 移到第三層的 A 所顯示的效果 */
.menubar .menubarlv3 a:hover {
	background: rgb(71,71,71);
}

/* 控制第二層選單位置 */
.menubar .menubarlv1 ul {left: -1px;}
.menubar .menubarlv1 ul + ul {left: 219px;}
.menubar .menubarlv1 ul + ul + ul {left: 439px;}
.menubar .menubarlv1 ul + ul + ul + ul {left: 621px;}

/* 控制第三層選單位置 */
.menubar .menubarlv2 ul {left: 229px;}
.menubar .menubarlv2 ul + ul {left: 440px;}
.menubar .menubarlv2 ul + ul + ul {left: 660px;}
.menubar .menubarlv2 ul + ul + ul + ul {left: 880px;}

/* ********************************************** */
/* 以下都是修正位置的 */

/*
	控制第二層選單位置，第二層選單欄過多時，往左偏移修正，加在上層 LI
	範例：
	<ul class="menubarlv1"><li class="fixlv2moveleft"><ul class="menubarlv2">
*/
.menubar .fixlv2moveleft > ul {left: -443px;}
.menubar .fixlv2moveleft > ul + ul {left: -222px;}
.menubar .fixlv2moveleft > ul + ul + ul {left: -1px;}
.menubar .fixlv2moveleft > ul + ul + ul + ul {left: 220px;}

/* 
	控制第二層選單項目，移上去時的效果
	以及
	控制第三層選單位置，讓它往左移，而不是預設的往右移，加在上層 UL
	範例：
	<ul class="menubarlv2 fixlast"><li><ul class="menubarlv3">
*/
.menubar .fixlast > li:hover {
	background: #009900;
	border-right: 5px solid #009900;
	margin-right: -5px;
	border-radius: 0 3px 3px 0;
}

.menubar .fixlast ul {left: -215px;}
.menubar .fixlast ul + ul {left: -435px;}
.menubar .fixlast ul + ul + ul {left: -635px;}
.menubar .fixlast ul + ul + ul + ul {left: -835px;}


.menubar .fixlv3moveleft > li:hover {
	background: #009900;
	border-right: 5px solid #009900;
	margin-right: -5px;
	border-radius: 0 3px 3px 0;
}

.menubar .fixlv3moveleft ul {left: -215px;}
.menubar .fixlv3moveleft ul + ul {left: -435px;}
.menubar .fixlv3moveleft ul + ul + ul {left: -635px;}
.menubar .fixlv3moveleft ul + ul + ul + ul {left: -835px;}

/*
	控制第二層選單下方項目（第 7 ~ 13），若有第三層選單
	使第三層選單往上移動，加在上層 LI
	範例：
	<ul class="menubarlv2"><li class="fixlv3moveup"><ul class="menubarlv3">
*/
.menubar .fixlv3moveup ul {bottom: 0;}

/*
利用 jQuery 幫有第三層的第二層 LI 加上圖示

jQuery 用法：
<script>
    $(".menubarlv3").parent().addClass("havelv3");
</script>
放在網頁末端

圖片 W * H = 8 * 11
*/
.havelv3 {
	background-image: url("http://ec.softking.com.tw/pic/right.gif");
	background-repeat: no-repeat;
	background-position: 208px 50%;
}

/* ********************************************** */
/* 修正IE7絕對定位差異 */
*:first-child+html .menubar ul li ul {
	margin-top:0;
}
/* 修正IE6絕對定位差異 */
* html .menubar ul li ul {
	margin-top:0;
}
/* 修正IE7絕對定位差異 */
*:first-child+html .menubar ul li ul li ul {
	margin-top:-32px;
}