コピペでOKサンプルはこちら

<ul class="menu">
	<li>
		<a class="init-bottom" href="#">Menu single</a>
		<ul>
			<li>
				<a href="#">Child Menu</a>
			</li>

			<li>
				<a href="#">Child Menu</a>
			</li>
			<li>
				<a href="#">Child Menu</a>
			</li>
		</ul>
	</li>

	<li>
		<a class="init-bottom" href="#">Menu multi level</a>
		<ul><!-- 第一階層 -->
			<li>
				<a class="init-right" href="#">Child Menu</a>
				<ul><!-- 第二階層 -->
					<li>
						<a class="init-right" href="#">Grandchild Menu</a>
						<ul><!-- 第三階層 -->
							<li>
								<a href="#">Great-Grandchild Menu</a>
							</li>

							<li>
								<a href="#">Great-Grandchild Menu</a>
							</li>

							<li>
								<a href="#">Great-Grandchild Menu</a>
							</li>
						</ul><!-- 第三階層 -->
					</li>

					<li>
						<a href="#">Grandchild Menu</a>
					</li>

					<li>
						<a href="#">Grandchild Menu</a>
					</li>
				</ul><!-- 第二階層 -->
			</li>
		</ul><!-- 第一階層 -->
	</li>
</ul>

スタイルシート

.sample_menu ul{
	padding : 0;
	list-style : none;
}
.sample_menu .menu{
	position : relative;
	width : 100%;
	height : 50px;
	max-width : 1000px;
	margin : 0 auto;
}
.sample_menu .menu > li{
	float : left;
	width : 25%; /* グローバルナビ4つの場合 */
	height : 50px;
	line-height : 50px;
	background : rgb(29, 33, 19);
}
.sample_menu .menu > li a{
	display : block;
	color : #fff;
}
.sample_menu .menu > li a:hover{
	color : #999;
}
.sample_menu .menu > li > ul{ /* 1階層 */
	visibility : hidden;
	opacity : 0;
	z-index : 1;
}
.sample_menu .menu > li > ul > li > ul{ /* 2階層 */
	visibility : hidden;
	opacity : 0;
}

.sample_menu .menu > li > ul > li > ul > li > ul{ /* 3階層 */
	visibility : hidden;
	opacity : 0;
}
.sample_menu .menu > li:hover{
	background: #072A24;
	-webkit-transition: all .5s;
	transition : all .5s;
}
.sample_menu .menu > li > ul > li{
	border-top : 1px solid #111;
}
.sample_menu .menu > li > ul > li > ul li{
	border-top : 1px solid #111;
}
.sample_menu .menu > li > ul > li a:hover{
	background : #111;
}
.sample_menu .menu > li > ul > li > ul > li a:hover{
	background : #2a1f1f;
}
.sample_menu .menu > li > ul > li > ul > li > ul > li a:hover{
	background : #1d0f0f;
}
/* 下矢印 */
.init-bottom:after{
	content : '';
	display : inline-block;
	width : 6px;
	height : 6px;
	margin : 0 0 0 15px;
	border-right : 1px solid #fff;
	border-bottom : 1px solid #fff;
	-webkit-transform : rotate(45deg);
	-ms-transform : rotate(45deg);
	transform : rotate(45deg);
}

/* floatクリア */
.sample_menu .menu:before,
.sample_menu .menu:after{
	content : " ";
	display : table;
}

.sample_menu .menu:after{
	clear : both;
}

.sample_menu .menu{
	*zoom : 1;
}
/* 単階層 */
.sample_menu .menu > li{
	position: relative;
}

.sample_menu .menu > li >ul{
	position: absolute;
	top : 40px;
	width : 100%;
	background : #072A24;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
}
.sample_menu .menu > li:hover >ul{
	top : 50px;
	visibility : visible;
	opacity : 1;
}

/* 多階層 ～3階層 */
.sample_menu .menu > li{
	position : relative;
}
.sample_menu .menu > li > ul{
	position : absolute;
	top : 40px;
	width : 100%;
	background : #072A24;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
	pointer-events : none;
}
.sample_menu .menu > li:hover > ul{
	top : 50px;
	visibility : visible;
	opacity : 1;
	pointer-events : auto;
}
.sample_menu .menu > li > ul > li{
	position : relative;
}
.sample_menu .menu > li > ul > li:hover{
	background : #111;
}
.sample_menu .menu > li > ul > li > ul{
	position : absolute;
	top : -1px;
	left : 100%;
	width : 100%;
	background : #111;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
}
.sample_menu .menu > li > ul > li:hover > ul{
	visibility : visible;
	opacity : 1;
}
.sample_menu .menu > li > ul > li > ul > li{
	position : relative;
}
.sample_menu .menu > li > ul > li > ul > li:hover{
	background : #2a1f1f;
}
.sample_menu .menu > li ul > li > ul > li > ul{
	position : absolute;
	top : -1px;
	left : 100%;
	width : 100%;
	background : #2a1f1f;
	-webkit-transition : all .2s ease;
	transition : all .2s ease;
}
.sample_menu .menu > li > ul > li > ul > li:hover > ul{
	visibility : visible;
	opacity : 1;
}
.init-right:after{
	content : '';
	display : inline-block;
	width : 6px;
	height : 6px;
	margin : 0 0 0 15px;
	border-right : 1px solid #fff;
	border-top : 1px solid #fff;
	-webkit-transform : rotate(45deg);
	-ms-transform : rotate(45deg);
	transform : rotate(45deg);
}

文字色や背景色などはお好きなように変更してください