Menu

STEP 1 - マークアップを確認し、どう作っていくかを考える

メイン階層はフロートで横並び。サブ階層は絶対配置でレイアウトします。

CSS

#dropdown,
#dropdown ul{
	margin: 0;
	list-style: none;
}
			
#dropdown li{
	position: relative;
	margin: 0;
}
			
/* 最上位階層はフロート */
#dropdown > li{
	float: left;
	width: 130px;
	text-align: center;
}
			
/* サブメニューは絶対配置 */
#dropdown ul{
	width: 200px;
	left: -35px;
	position: absolute;
	border: 1px solid #bbb;
	… 省略 ...
	background-color: #fff;
	… 省略 ...
	z-index: 9999;
}

Chapter 14