Web production note

　【更新日 : 】

【css】cssのみで作成するシンプルなドロップダウンメニュー

Category：
css
Tags：
,

ドロップダウンメニューをcssのみで作成したサンプルです。

HTML

メニューの箇所もリンクにする場合はpタグをaタグに変更してください。

<ul class="global-nav">
	<li>
		<p>メニュー</p>
		<ul class="drop-menu">
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
		</ul>
	</li>
	<li>
		<p>メニュー</p>
		<ul class="drop-menu">
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
		</ul>
	</li>
	<li>
		<p>メニュー</p>
		<ul class="drop-menu">
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
			<li><a href="#">リンク</a></li>
		</ul>
	</li>
</ul>

CSS

.global-nav {
	padding: 0;
	border-left: 1px solid #ccc;
	background: #fff;
	text-align: center;
	line-height: 1.6;
	list-style: none;
}
.global-nav:after {
	content: "";
	clear: both;
	display: block;
}
.global-nav a {
	padding: 15px 0 11px;
	display: block;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #0070cc;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.global-nav .consumer a {
	padding: 15px 0 9px;
}
.global-nav .home {
	overflow: hidden;
}
.global-nav > li {
	position: relative;
	float: left;
	height: 54px;
	width: 25%;
	border: 1px solid #ccc;
	border-left: none;
}
.global-nav > li p {
	padding: 15px 0 0;
	height: 54px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #0070cc;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.global-nav > li:hover > a,
.global-nav > li:hover > p {
	background: #2e93e6;
	color: #fff;
	text-decoration: none;
}
.global-nav > li:hover .drop-menu {
	display: block;
}
.global-nav > li.current > a,
.global-nav > li.current > p {
	background: #2e93e6;
	color: #fff;
	text-decoration: none;
}
.global-nav .drop-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 99;
	background: #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-top: none;
}
.global-nav .drop-menu li {
	border-top: 1px solid #ccc;
	list-style: none;
}
.global-nav .drop-menu li:first-child {
	border-top: none;
}
.global-nav .drop-menu li:hover a {
	background: #2e93e6;
	color: #fff;
	text-decoration: none;
}

sass

.global-nav {
	padding: 0;
	border-left: 1px solid #ccc;
	background: #fff;
	text-align: center;
	line-height: 1.6;
	list-style: none;
	&:after {
		content: "";
		clear: both;
		display: block;
	}	
	a {
		padding: 15px 0 11px;
		display: block;
		@include box-sizing(border-box);
		color: #0070cc;
		@include transition(all 0.3s ease);
	}
	.consumer a {
		padding: 15px 0 9px;
	}
	.home {
		overflow: hidden;
	}
	> li {
		position: relative;
		float: left;
		height: 54px;
		width: 25%;
		border: 1px solid #ccc;
		border-left: none;
		p {
			padding: 15px 0 0;
			height: 54px;
			@include box-sizing(border-box);
			color: #0070cc;
			@include transition(all 0.3s ease);
		}
		&:hover {
			> a,
			> p {
				background: #2e93e6;
				color: #fff;
				text-decoration: none;
			}
			.drop-menu {
				display: block;
			}
		}
	}
	.drop-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		padding: 0;
		z-index: 99;
		background: #fff;
		@include box-sizing(border-box);
		border: 1px solid #ccc;
		border-top: none;
		li {
			border-top: 1px solid #ccc;
			&:first-child {
				border-top: none;
			}
			&:hover {
				a {
					background: #2e93e6;
					color: #fff;
					text-decoration: none;
				}
			}
		}
	}
}