CSSで実現するプルダウンメニュー

http://c-brains.jp/blog/wsg/08/06/05-155929.php

ちょっと追記すると、menuの上下左右のスペースを消したいのと、bullet （・）がはいっちゃうのと、上下で並んで表示されないのを修正：

ul#pulldown-menu {
        margin: 0 0em;
	padding: 0;
	width: 100%
}
ul#pulldown-menu a {
	color: #FFFFFF; 
	text-decoration: none;
}
ul#pulldown-menu a:link,
ul#pulldown-menu a:visited {
/*	background: #3366FF; // default背景色  */
}
ul#pulldown-menu a:hover,
ul#pulldown-menu a:active {
	background: #FF9933; // hover時の背景色 
}

ul#pulldown-menu li {
list-style:none;
        margin: 0 0em;
        float: left;
        position: relative;
        width: inherit;
/*        width: 9em;
	height: 2em; */
        font-weight: bold;
        line-height: 2em;
}
ul#pulldown-menu li a {
	display: block;
        width: inherit;
/*        height: 2em; */
        text-align: center;
}

/* 下層のメニューを不可視に */
ul#pulldown-menu li ul {
	padding: 0; /* indentしないように */
        display: none;
        width: inherit;
}

/* 疑似要素 :hover で下層のメニューを可視に */
ul#pulldown-menu li:hover ul {
	list-style:none;
	display: block;
        position: absolute;
        z-index: 100;
}

ul#pulldown-menu li ul li {
        float: none;
        margin: 0;
        font-weight: normal;
}

あとは、リンクにある通りにやってうまく行きました。便利で助かりました。