#navigation {font-size:12px; width:280px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;} 

ul.top-level {background:#666;}
ul.top-level li {
 border-bottom: #59B9D5 solid;
 border-top: #59B9D5 solid;
 border-width: 1px;
}

#navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:27px;
 line-height: 27px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
}

#navigation li:hover {
 background: #FF9900;
 position: relative;
}

ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:280px;
}

/*Seconda Level*/
#navigation .sub-level {
    background: #999;
}

/*Third Level*/
#navigation .sub-level .sub-level {
    background: #09C;
}

/*RESET STYLES*/
li:hover .sub-level .sub-level {
	display:none;
}
.sub-level li:hover .sub-level {
	display:block;
}

/* untuk ukuran 1080px kebawah - TAB */
@media screen and (max-width: 1080px) {
	#navigation {
		background: #59B9D5 solid;
		display: block;
		width:auto}

	#navigation li{
		list-style: none;
		display: block;
		width:auto}

	ul.top-level {
		background:#666;
		display: block;
		width:auto}

	ul.top-level li {
		border-bottom: #59B9D5 solid;
		border-top: #59B9D5 solid;
		border-width: 1px;
		width:auto; }

}

@media screen and (max-width: 768px) {
	
	#navigation {
		background: #59B9D5 solid;
		display: block;
		width:auto}

	#navigation li{
		list-style: none;
		display: block;
		width:auto}

	ul.top-level {
		background:#666;
		display: block;
		width:auto}

	ul.top-level li {
		border-bottom: #59B9D5 solid;
		border-top: #59B9D5 solid;
		border-width: 1px;
		width:auto; }

}