	<style type="text/css">
		body {
			margin:0;
			padding:0;
			line-height: 1.5;
		}
		.menu-wrapper {
			margin:10px auto;
			position: relative;
			width:700px;
		}
		.menu-wrapper ul{
			margin:0;
			padding:0;
			background-color: #333;
		}
			ul.menu-horizontal {
				width:100%;
				position: relative;
			}
			ul.menu-horizontal li {
				list-style: none;
			}
			/*Style menu horizontal*/
			ul.menu-horizontal >li{
				display: inline-block;
			}
			ul.menu-horizontal li a{
				position: relative;
				display: block;
				padding:10px 20px;
				text-decoration: none;
				color:#eee;
			}
			ul.menu-horizontal li a:hover {
				background-color:#DD3D36;
				-webkit-transition:all 0.5s ease-in-out;
			}
			/*Style Tanda panah pada menu yang mempunyai sub menu*/
			ul.menu-horizontal >li >a >span.arrow {
				width:0;
				height: 0;
				border:5px solid transparent;
				border-top:7px solid #eee;
				position: absolute;
				right: 5px;
				top:17px;
				z-index: 
			}

			/*Style tanda panah pada sub menu level 1 dan level 2*/
			ul.menu-horizontal li ul li span.arrow {
				width:0;
				height: 0;
				border:5px solid transparent;
				border-left:7px solid #eee;
				position: absolute;
				right: 5px;
				top:17px;
				z-index: 
			}


			/*Menyembunyikan sub menu ketika tidak dihover*/
			ul.submenu {
				position: absolute;
				display: none;
			}

			ul.submenu li {
				position: relative;
			}

			/*untuk menciptakan efek animasi ketika dihover*/
			@-webkit-keyframes mantul-vertikal {
				0%{top: -300px;opacity: 0;}
				50%{top: 120%;opacity: 1;}
				75%{top: 80%;opacity: 1;}
				100%{opacity: 1;top:100%;}
			}
			@keyframes mantul-vertikal {
				0%{top: -300px;opacity: 0;}
				50%{top: 120%;opacity: 1;}
				75%{top: 80%;opacity: 1;}
				100%{opacity: 1;top:100%;}
			}
			@-webkit-keyframes mantul-horizontal {
				0%{left:300%;opacity: 0}
				50%{left: 80%;opacity: 1;}
				75%{left: 110%;opacity: 1;}
				100%{left:100%;opacity: 1}
			}
			@keyframes mantul-horizontal {
				0%{left:300%;opacity: 0}
				50%{left: 80%;opacity: 1;}
				75%{left: 110%;opacity: 1;}
				100%{left:100%;opacity: 1}
			}
			
			/*Menampilkan sub menu level 1 ketika menu di hover*/
			ul.menu-horizontal li:hover ul.level-1 {
				min-width: 150px;
				display: block;
				top:100%;
				-webkit-animation:mantul-vertikal 1s;
				animation:mantul-vertikal 1s;
			}

			/*Menampilkan sub menu level 1 ketika menu di hover*/
			ul.menu-horizontal li ul li:hover ul.level-2 {
				min-width: 150px;
				display: block;
				-webkit-animation:mantul-horizontal 1s;
				animation:mantul-horizontal 1s;
				top:0;
				left:100%;
			}

			/*Menampilkan sub menu level 1 ketika menu di hover*/
			ul.menu-horizontal li ul li ul li:hover ul.level-3 {
				min-width: 150px;
				display: block;
				-webkit-animation:mantul-horizontal 1s;
				animation:mantul-horizontal 1s;
				top:0;
				left:100%;

			}
	</style>
