© Style-5.net
 

シンプルで機能的な階層付き CSSドロップダウンメニュー

グラデーション無しシンプルな表現ボタンですが、階層付きドロップダウンで機能的になっています。
colorは、RBGの単色指定していますが、RGBA透過指定も可能です(但しIE8以下では表示出来ません)

DEMO


CSS
#drop {
	width:530px;
	height:22px;
}

#drop ul {
	width:530px;
}

#drop ul li {
	width:100px;
	height:22px;
	float:left;
	list-style:none;
	position:relative;
}

#drop ul li a {
	display:block;
	height:22px;
	background:#969696;
	border-left:5px solid #ff7600;
	text-align:center;
	line-height:22px;
	color:#f5f5f5;
	text-decoration:none;
        -webkit-transition: 0.8s; /* CSS3によるアニメーション(フェード)効果 */
        -moz-transition: 0.8s;
        -o-transition: 0.8s;
        -ms-transition: 0.8s;
        transition: 0.8s;
}

#drop ul li a:hover {
	background-color:#000;
	border-left:5px solid #dfff40;
	color:#fff;
}

#drop ul li ul {
	width:100px;
	position:absolute;
	top:23px;
	left:-40px;
	visibility:hidden;
	opacity:0;
	z-index:9999;
}

#drop ul li:hover ul {
	visibility:visible;
	opacity:1;
}

#drop ul li ul li {
	margin:-5px 0 0;
	border-left:none;
	float:none;
}

#drop ul li:hover ul li {
	margin-top:0;
}

#drop ul li ul li ul {
	top:0;
	left:101px;
}

#drop ul li ul li ul.dd-left {
	top:0;
	left:-141px;
}

#drop ul li:hover ul li ul {
	visibility:hidden;
	opacity:0;
}

#drop ul li:hover ul li:hover ul {
	visibility:visible;
	opacity:1;
}

#drop ul li:hover ul li ul li {
	margin-left:-10px;
}

#drop ul li:hover ul li ul.dd-left li {
	margin-left:10px;
	left:40px;
}

#drop ul li:hover ul li:hover ul li {
	margin-left:-40px;
}

※CSSオプション
一番左側のボーダーを外す場合は、
#drop ul li:first-child {
	border-left:none;
}
を追記

HTML
<div id="drop">
	<ul class="clearfix">
		<li><a href="#">親メニュー 1</a></li>
		<li><a href="#">親メニュー 2</a>
			<ul>
				<li><a href="#">子メニュー 2-1</a>
					<ul>
						<li><a href="#">孫メニュー 2-1-1</a></li>
						<li><a href="#">孫メニュー 2-1-2</a></li>
						<li><a href="#">孫メニュー 2-1-3</a></li>
						<li><a href="#">孫メニュー 2-1-4</a></li>
						<li><a href="#">孫メニュー 2-1-5</a></li>
						<li><a href="#">孫メニュー 2-1-6</a></li>
					</ul>
				</li>
				<li><a href="#">子メニュー 2-2</a>
					<ul>
						<li><a href="#">孫メニュー 2-2-1</a></li>
						<li><a href="#">孫メニュー 2-2-2</a></li>
						<li><a href="#">孫メニュー 2-2-3</a></li>
						<li><a href="#">孫メニュー 2-2-4</a></li>
						<li><a href="#">孫メニュー 2-2-5</a></li>
						<li><a href="#">孫メニュー 2-2-6</a></li>
					</ul>
				</li>
				<li><a href="#">子メニュー 2-3</a></li>
				<li><a href="#">子メニュー 2-4</a></li>
				<li><a href="#">子メニュー 2-5</a></li>
				<li><a href="#">子メニュー 2-6</a></li>
			</ul>
		</li>
		<li><a href="#">親メニュー 3</a>
			<ul>
				<li><a href="#">子メニュー 3-1</a></li>
				<li><a href="#">子メニュー 3-2</a></li>
				<li><a href="#">子メニュー 3-3</a></li>
				<li><a href="#">子メニュー 3-4</a></li>
				<li><a href="#">子メニュー 3-5</a></li>
				<li><a href="#">子メニュー 3-6</a></li>
			</ul>

		</li>
		<li><a href="#">親メニュー 4</a>
			<ul>
				<li><a href="#">子メニュー 4-1</a></li>
				<li><a href="#">子メニュー 4-2</a></li>
				<li><a href="#">子メニュー 4-3</a></li>
			</ul>

		</li>
		<li><a href="#">親メニュー 5</a>
			<ul>
				<li><a href="#">子メニュー 5-1</a></li>
				<li><a href="#">子メニュー 5-2</a></li>
				<li><a href="#">子メニュー 5-3</a></li>
				<li><a href="#">子メニュー 5-4</a></li>
				<li><a href="#">子メニュー 5-5</a>
					<ul class="dd-left">
						<li><a href="#">孫メニュー 5-5-1</a></li>
						<li><a href="#">孫メニュー 5-5-2</a></li>
						<li><a href="#">孫メニュー 5-5-3</a></li>
						<li><a href="#">孫メニュー 5-5-4</a></li>
						<li><a href="#">孫メニュー 5-5-5</a></li>
						<li><a href="#">孫メニュー 5-5-6</a></li>
					</ul>
				</li>
				<li><a href="#">子メニュー 5-6</a></li>
			</ul>
		</li>
	</ul>
</div>

※要素、カラー、サイズ等はご自身の環境に応じて適宜に編集願います。