.navigation{
    display:inline-block;
}

/*li 設position:relative; 是為了讓ul有定位點,relative會讓li保留在原位不會徧離*/
.navigation li{
    position:relative;
    /*text-align: left;*/
}

/*第一層橫向***********************/

.navigation > li{
    display:inline-block;
    z-index: 2;
}

/*第一層 end****************************************/

/*第二層直向****************************************/

.navigation > li > ul{
    display:none;
    position:absolute;
    left: 0px;
    padding-top:27px; /* 與第一層和第二層的高度間隔*/
}

.navigation > li:hover > ul{
    display: block;
}

/*第二層 end **********************************/

/*第三層以後橫向*****************************/

.navigation ul > li > ul{
    display:none;
    position:absolute;
    left:100%;
    top:0px;
}

.navigation ul > li:hover > ul{
    display: block;
}

/* 第三層 end **********************************/

/* 第一層的樣式 */
.navigation > li > a{
    display:block;
    height:45px;
    padding:0px 15px;
    padding-top:15px;
    /*font-size:15px;*/
    text-decoration:none;
    color:#303030;
    white-space: nowrap;
}

/* 第一層的樣式 hover和focus*/
.navigation > li:hover > a,
.navigation .focus.icon-down:after,
.navigation .focus{
    border-radius:3px;
    color:#FFF;
    background-color: #2196f3;
}

/* 第二層以後的樣式 */
.navigation > li > ul a{
    display:block;
    width:250px;
    height:44px;
    border-left:1px solid #e3e3e4;
    border-right:1px solid #e3e3e4;
    border-bottom:1px solid #e3e3e4;
    padding:0px 15px;
    padding-top:14px;
    padding-bottom:10px;
    text-align: left;
    text-decoration:none;
    font-size:15px;
    color:#666;
    background-color:#FFF;
}
/* 第二層以後的樣式 hover */
.navigation > li > ul a:hover{
    color:#FFF;
    border-left:1px solid #2196f3;
    border-right:1px solid #2196f3;
    border-bottom:1px solid #2196f3;     
    background-color: #2196f3;
}

/* 下拉選單上緣線條 */
.navigation ul > li:first-of-type > a{
    border-top:3px solid #2196f3;
}

/* 最後一個下拉選單往左移 */
/*
.navigation > li:last-of-type > ul{
    left: -103px;
}
*/

/* 分成三排 */
/*
.navigation > li:nth-of-type(2) > ul{
    width: 360px;
}

.navigation > li:nth-of-type(2) > ul > li{
    display: inline-block;
    margin-right: -5px;
}

.navigation > li:nth-of-type(2) > ul > li a{
    width: 120px;
}
*/
 /*下拉選單上緣線條,前三個 */
/*
.navigation > li:nth-of-type(2) > ul > li:nth-of-type(1) > a,
.navigation > li:nth-of-type(2) > ul > li:nth-of-type(2) > a,
.navigation > li:nth-of-type(2) > ul > li:nth-of-type(3) > a{
    border-top:3px solid #2196f3;
}
*/
/* 分成兩排 end */

/* 向下箭頭 */
.navigation .icon-down:after{
    font-family: FontAwesome;
    content:"\f107";
    font-size:8px;
    color:#303030;
    position: relative;
    right:-6px;
}
/* 向下箭頭 hover */
.navigation > li:hover .icon-down:after{
    color: #FFF;
}

/* 向右箭頭 */
.navigation .icon-right:after{
    font-family: FontAwesome;
    content:"\f105";
    font-size:8px;
    color:#999;
    position: absolute;
    right:10px;
    top:16px;
}   

/* 向右箭頭 hover */
.navigation .icon-right:hover:after{
    color:#FFF;
}


/*  RWD  */

.navigation-rwd {
    display: none;
    width: 100%;
    font-size: 15px;    
}

.navigation-rwd li{
    position: relative;
}

/* 第二層以後縮排 */
.navigation-rwd > li ul a{
    padding-left: 23px;
}

/****************************************/

/* 第一個選單上緣線條 */
.navigation-rwd > li:first-of-type > a{
    border-top:4px solid #2196f3;
}

/* 選單項目樣式 */
.navigation-rwd a{
    display:block;
    padding-left:10px;
    line-height: 30px;
    text-decoration:none;
    border-bottom:1px solid #eaeaec;
}

/* 選單項目樣式hover */
.navigation-rwd a:hover{
    color: #FFF;
    background-color: #2196f3;
}

/* 向下箭頭 */
.navigation-rwd .icon-down:after{
    font-family: FontAwesome;
    content:"\f107";
    /*color:#666;*/
    position: absolute;
    right:5px;
}

/* 向上箭頭 */
.navigation-rwd .icon-up:after{
    font-family: FontAwesome;
    content:"\f106";
    /*color:#666;*/
    position: absolute;
    right:5px;
}

.navigation-rwd-bar i{
    color: #FFF;
    background-color:#2196f3;
    cursor: pointer;
}