/*
	作者：Yuxin
	教學文：http://fundesigner.net/only-css-menu
	授權：MIT License
*/
/* 初始化 */
#topmenubar {
 position: relative; left:0px; top:0px; z-index:1000;
 border:0;
 text-align:center;

 width:900px;
 background:#ccc;
 margin:0 0 5px 0;
 padding: 0;
}
/* 選單 li 之樣式 */
ul.topmenu {
 display:inline-block;
 white-space:nowrap;*display:inline;
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.topmenu li {
 position: relative;
 display:inline-block;
 vertical-align:top;*display:inline;*zoom:1;
 text-align:left;
}

/* 選單 li 裡面連結之樣式 */
ul.topmenu li a {
 display: block;
 padding:19px 35px 16px 35px;
 text-transform:uppercase;
}
ul.topmenu li.end a {
 border:0;
}
/* 特定在第一層，以左邊灰線分隔 */
ul.topmenu > li > a{
 font-family: Calibri, Arial, Sans-serif;
 font-size: 12pt;
 font-weight: 700;
 color: #333;
 text-transform: uppercase;
 text-decoration: none;
}
ul.topmenu > li:hover > a{
 color: #47873e;
 background:transparent;
}
/* 特定在第一層 > 第二層或以後下拉部分之樣式 */
ul.topmenu ul {
 display: none;
 float: left;
 position: absolute;
 list-style: none;
 left: 0;
 list-style: none;
 margin: 0;
 padding: 0;
}
/* 當第一層選單被觸發時，指定第二層顯示 */
ul.topmenu li:hover > ul{
 display: block;
}
ul.topmenu ul{
 background: #efefef;
 border:1px solid #ccc;
 width:180px
}	
/* 特定在第二層或以後下拉部分 li 之樣式 */
ul.topmenu ul li {
 font-size:10pt;
 font-weight:700;
 display: block;
 margin: 0;
 border-bottom: 1px solid #DDD;
 background-image:none;
}
/* 特定在第二層或以後下拉部分 li （最後一項不要底線）之樣式 */
ul.topmenu ul li:last-child {
 border-bottom: none;
}
/* 第二層或以後選單 li 之樣式 */
ul.topmenu ul a {
 width: auto;
 color: #444;
 margin:0;
 padding: 7px 10px 5px 15px;
 text-decoration: none;
}
ul.topmenu ul a:hover {
 color: #bc0500;
 background: #f3f3f0;
}
/* 第三層之後，上一層的選單觸發則顯示出來（皆為橫向拓展） */
ul.topmenu ul li:hover > ul{
 display: block;
 position: absolute;
 top: 5px;
 left: 90%;
}
ul.topmenu ul ul{
 background: #f6f6f6;
 border:1px solid #ccc;
}