[ CSS ] ドロップダウンメニューのサンプル

CSS だけで動くなんてすごいですねー。

サンプルコード
———————————————————————-

### HTML

### 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;
}

/* —————————————————— */

実際の動作サンプル
———————————————————————-

– [CSS ドロップダウンメニューのサンプル](https://bowz.info/wp-content/uploads/2011/08/css-dropdown-menu/index.html)