サブメニューがドロップするナビ・2

CSSだけで作ったドロップダウンナビ


<div class="dropnav">
	<ul>
		<li><a href="/">Home</a>
		</li>
	</ul>

	<ul>
		<li><a href="#">AAAA</a>
			<ul class="sub">
				<li><a href="#">AAAAA1</a></li>
				<li><a href="#">AAAAA2</a></li>
				<li><a href="#">AAAAA3</a></li>
			</ul>
		</li>
	</ul>
		・・・
</div>


/*Color*/
/* --------------------------------------------------------------------- */
.dropnav {
	background: rgba(26,25,30,.3);
	}
.dropnav ul a {
	background: rgba(26,25,30,.6);
	}
.dropnav > ul a:hover {
	background: rgba(26,25,30,.9);
	color: #fff;
	}
.dropnav .sub {
	background: rgba(26,25,30,.1);
	}
.dropnav .sub a {
	background: rgba(26,25,30,.1);
	color: #444;
	}
.dropnav .sub a:hover {
	background: rgba(26,25,30,.9);
	}
/* --------------------------------------------------------------------- */
.dropnav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	width: 100%;
	padding-right: .5rem;
	z-index: 500;
	}
.dropnav ul {
	height: 4.5rem;
	}
.dropnav ul li {
	margin: 2px 1px;
	}
.dropnav ul a {
	color: #fff;
	display: block;
	height: 4rem;
	line-height: 4rem;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	padding: .2rem 4rem;
	cursor: pointer;
	}
.dropnav .sub {
	display: none;
	position:absolute;
	width: 100%;
	top: 4.4rem;
	left: 0;
	z-index: 100;
	}
.dropnav > ul li:hover .sub {
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 500;
	}
.dropnav .sub a {
	display:block;
	}

TOP