Pure CSS Dropdown Navigation Bar

In this Tutorial, You will Learn how to create a basic Pure CSS Dropdown Navigation Bar. Please Follow the below tutorial for the live coding.

Drop Down Menu HTML CSS [ Source Code ]:

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Pure CSS Dropdown Navigation Bar</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<nav class="nav-area">
		<ul>
			<li>
				<a href="#">home</a>
			</li>
			<li>
				<a href="#">About</a>
			</li>
			<li>
				<a href="#">Services</a>
				<ul>
					<li>
						<a href="#">Web Design</a>
					</li>
					<li>
						<a href="#">Web Development</a>
					</li>
					<li>
						<a href="#">Email Marketing</a>
					</li>
					<li>
						<a href="#">Graphics Design</a>
						<ul>
							<li>
								<a href="#">Logo Design</a>
							</li>
							<li>
								<a href="#">Card Design</a>
							</li>
							<li>
								<a href="#">Poster Design</a>
							</li>
							<li>
								<a href="#">Template Design</a>
								<ul>
									<li>
										<a href="#">Web Template</a>
									</li>
									<li>
										<a href="#">Email Template</a>
									</li>
									<li>
										<a href="#">News Template</a>
									</li>
									<li>
										<a href="#">Bio Template</a>
									</li>
									<li>
										<a href="#">Wedding Template</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Brochure Design</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">SEO</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Portfolio</a>
			</li>
			<li>
				<a href="#">Contact</a>
			</li>
		</ul>
	</nav>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	font-family: poppins;
	background: url("https://i.postimg.cc/ZnWtB7jg/2.jpg");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100vh;
}
a {
	font-size: 12px;
	text-transform: uppercase;
}
.nav-area {
	background: #262626;
}
.nav-area:after {
	content: '';
	clear: both;
	display: block;
}
.nav-area ul {
	list-style: none;
	margin: 0;
}
.nav-area>ul>li {
	float: left;
	position: relative;
}
.nav-area ul li a {
	text-decoration: none;
	color: #fff;
	padding: 15px 20px;
	display: block;
}
.nav-area ul li:hover a {
	background: #34495e;
}
.nav-area ul ul {
	position: absolute;
	padding: 0;
	min-width: 160px;
	display: none;
	top: 100%;
	left: 0;
}
.nav-area ul li:hover>ul {
	display: block;
}
.nav-area ul ul li:hover a {
	background: #262626;
}
.nav-area ul ul li {
	position: relative;
}
.nav-area ul ul ul {
	top: 0;
	left: 100%;
}
.nav-area ul ul ul li:hover a {
	background: #34495e;
}

1 Comments

Post a Comment

About Us

Contact Form

Pure CSS Dropdown Navigation Bar

You might like

1 Comments

Post a Comment

Contact Form