CSS だけで動くなんてすごいですねー。
サンプルコード ———————————————————————-
HTML
<head>
<meta charset="UTF-8">
<title>CSS ドロップダウンメニューのサンプル</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
</head>
<body>
<div id="access">
<ul>
<li><a href="#">企業情報</a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">沿革</a>
<ul>
<li><a href="#">第三階層に長い名前のページをぶら下げるとどんな表示になるか実験してみる</a>
<ul>
<li><a href="#">第四階層</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">企業情報</a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">沿革</a>
<ul class="sub-menu">
<li><a href="#">第三階層に長い名前のページをぶら下げるとどんな表示になるか実験してみる</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">企業情報</a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">沿革</a>
<ul class="sub-menu">
<li><a href="#">第三階層に長い名前のページをぶら下げるとどんな表示になるか実験してみる</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
CSS
/* —————————————————— */
#access {
background: #222;
clear: both;
display: block;
float: left;
width: 100%;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 3em;
padding: 0 1.5em;
text-decoration: none;
}
/* —————————————————— */
#access ul ul {
display: none;
float: left;
margin: 0;
position: absolute;
top: 3em;
left: 0;
width: 188px;
z-index: 99999;
border-bottom: 1px solid #ccc;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul ul a {
border-left: 0;
}
#access ul ul a {
background: #f9f9f9;
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
width: 168px;
border: 1px solid #CCC;
border-bottom: 0;
}
/* —————————————————— */
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
/* —————————————————— */
実際の動作サンプル ———————————————————————-