CSSだけで作るきれいなアコーデオンメニューです。CSSだけなので、JavaScriptのフレームワークなどを多用しているときにコンフリクトの心配がなく安心して使えます。サイズやアイテム数の変更なども容易です。

サンプルのhtmlソース

<div id="container">
<ul class="menu">
	<li class="item">
		<a id="menu01"><span style="color:#000;">コスト削減</span></a>
		<ul>
			<li><a href="../../p001/001.html" target="_blank">百万石&nbsp;BtoB&nbsp;WEB受注システム</a></li>
			<li><a href="../../b2b-zero/index.html" target="_blank">0万石&nbsp;BtoB&nbsp;WEB受注システム</a></li>
			<li><a href="../../koubai/index.html" target="_blank">EDI連動型・百万石&nbsp;購買システム</a></li>
			<li><a href="http://stock.web-order.jp/index.html" target="_blank">0万石&nbsp;在庫照会システム</a></li>
		</ul>
	</li>
	<li class="item">
		<a id="menu02"><span style="color:#000;">受託開発（１）</span></a>
		<ul>
			<li><a href="../../kaihatu.html" target="_blank">ソフトウェア開発・システム開発</a></li>
			<li><a href="../../smart/index.html" target="_blank">スマートフォン向け&nbsp;WEBシステム開発</a></li>
		</ul>
	</li>
	<li class="item">
		<a id="menu03"><span style="color:#000;">受託開発（２）</span></a>
		<ul>
			<li><a href="../../root_delivery/index.html" target="_blank">定期配達・回収品管理システム</a></li>
			<li><a href="../../label_printer/index.html" target="_blank">SATOラベルプリンタ用システム開発</a></li> 
			<li><a href="../../handy-t/index.html" target="_blank">ハンディターミナル活用システム開発</a></li> 
		</ul>
	</li>
	<li class="item">
		<span id="bottom"></span>
	</li>
</ul>
</div>

サンプルのCSSソース

#container {
	margin: 50px auto 0;
	width: 200px;
	font: 14px sans-serif;
	}
.menu {
	width: 300px;
	list-style: none;
	border-radius: 10px;
	border: 1px solid darkgray;
	background: linear-gradient(to bottom, whitesmoke, silver);
	box-shadow: 0px 4px 10px darkgray;
	}
.item {
	overflow: hidden;
	border-top: 1px solid white;
	cursor: pointer;
	}
.menu li.item:first-child {
	border-top: none;
	}
.item a span {
	display:block;
	padding:10px 10px 10px 20px;
	color: black;
	}
.item ul li a {
	display: block;
	padding-left: 20px;
	line-height: 30px;
	height: 0;
	text-decoration: none;
	font-size: 14px;
	background: white;
	color: #666;
	transition: 0.5s ease-in-out;
	}
.item:hover ul li a {
	height: 30px;
	}
.item ul li a:hover {
	background: lightsteelblue;
	color: black;
	}
#bottom {
	display:block;
	padding:10px 10px 10px 20px;	
	cursor: default;
	}