パソコンヲタクのにょびたが社会保険労務士の国家資格を取得をめざすメディアです

CSSのみで作るドロップダウンメニュー メモ

By

html メモ

html

<nav class="menu">
	<ul>
	<li><a href="#">トップ</a></li>
	<li><a href="#">カテゴリ1</a>
		<ul>
		<li><a href="#">サブカテゴリ1</a></li>
		<li><a href="#">サブカテゴリ2</a></li>
		<li><a href="#">サブカテゴリ3</a></li>
		</ul>
		</li>
	<li><a href="#">カテゴリ2</a></li>
	<li><a href="#">カテゴリ3</a></li>
	<li><a href="#">サイトマップ</a></li>
	</ul>
</nav>

 

css

/* menu */
.menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu ul > li {
	float: left;
	position: relative;
}

.menu ul li a {
	padding: 5px 10px;
	display: block;
	font-size: 14px;
	text-decoration: none;
	color: #000000;
	background-color: #d3d3d3;
}

.menu li a:hover {
	color: #ffffff;
	background-color: #696969;
}

/* サブカテゴリー */
.menu ul li ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	top: 30px;
	left: 0px;
	display: none;
}

.menu ul li:hover ul {
	display: block;
}

.menu ul li ul li a {
	border-top: solid 1px #ffffff;
}

サンプル

http://nyobita.main.jp/tools/dropdownmenu_css/
 



 

カテゴリー: webデザイン