CSSのみのプルダウンメニュー

css

http://d.hatena.ne.jp/chepooka/20050527/1117198009

風邪がきつくこんな時間に目が覚める。眠気が出るようネットしてたらこんなのみつけた。早速コピペで試す。が、なんかまともに動かない。な〜ぜ〜。動くようにちょっとソース書いてみた。divに:hoverって指定でマウスオーバーの制御が出来るんだね。こりゃー楽だ。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>CSS de Menu</title>

<style>
/*** <PullDownMenu> ***/
div.pulldown{
	display: block;
	float: left;
	position: relative;
}
div.pulldown ul{
	display: none;
}
div.pulldown:hover ul{
	visibility: visible;
	display: block;
	position: absolute;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 999;
}
div.pulldown ul li {
	float: left;
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
/*** </PullDownMenu> ***/

div.pulldown a{
	display: block;
	text-decoration: none;
	padding: 1% 5%;
}
div.pulldown a:hover{
	background-color: #0000cc;
	color: #ffffff;
}
</style>

</head>

<body>

<div class="pulldown" style="background-color:#f9f9f9; width:150px; border:1px solid black;">
<a href="#">Menu</a>
<ul style="background-color:#f9f9f9; border:1px solid black;">
 <li><a href="">Item</a></li>
 <li><a href="">Item</a></li>
 <li><a href="">Item</a></li>
 <li><a href="">Item</a></li>
 <li><a href="">Item</a></li>
 <li><a href="">Item</a></li>
 <li><a href="">Item</a></li>
 <li><a href="">Item</a></li>
</ul>
</div>

</body>

</html>