How To Make Drop Down Menu Using HTML And CSS

October 8, 2022October 8, 2022 M-SoftTech 0 Comments

Hello Friends welcome to m-softtech. in this article I will teach you how to make a dropdown menu using of html CSS only. it is very simple if you know about html CSS. we need dropdown menu for all website. as you also know that menu is very important part of our website. without menu bar site is incomplete. firstly we ask you why you need a menu in website. if you don’t know don’t worry about for that I will explain you why we need a menu in website. basically when we create a website we also create multiple pages divided by our services and features according. the menu is play important role for interlinking on that pages between.so in this article I will teach you how to make a dropdown menu using of html CSS. if you don’t know what is dropdown menu then i will explain you. dropdown menu is like. one menu inside another menu you can say that. suppose we have a service menu and I want add inside service menu for my all services then we create a dropdown menu inside of our service menu. in this article I will explain you how to create multiple dropdown menu.

How to make a navbar menu using html css

I will share all codes with you. first we need create a html document and then second step we create a stylesheet and then link these stylesheet in our html document also. you can see the below code i will make multiple ul and make ul inside another ul also creating a dropdown menu.

Here is My HTML Code

<!DOCTYPE html>
<html>
<head>
	<title>DropDown Menu</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<div id="container">
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">WordPress</a>
				<ul>
					<li><a href="#">Themes</a></li>
					<li><a href="#">Plugins</a></li>
					<li><a href="#">Tutorials</a></li>
				</ul>
				</li>
				<li><a href="#">Web Design</a>
					<ul>
						<li><a href="#">HTML/CSS</a></li>
						<li><a href="#">Jquery</a></li>
						<li><a href="#">Others</a>

							<ul>
								<li><a href="#">Stuff</a></li>
								<li><a href="#">Things</a></li>
								<li><a href="#">Other Stuff</a>

									<ul>
										<li><a href="#">Stuff</a></li>
										<li><a href="#">Things</a></li>
										<li><a href="#">Other Stuff</a></li>
									</ul>
								</li>
							</ul>

						</li>
					</ul>
				</li>
				<li><a href="#">Graphic Design</a></li>
				<li><a href="#">Inspiration</a></li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">About</a></li>
			</ul>
		</nav>
	</div>	



</body>
</html>

Vertical Animated Navbar Using HTML CSS & JQUERY

Here is My CSS Code

body{
	background: url(../image/back.jpg);
	font-size: 22px;
	line-height: 32px;
	margin: 0px;
	color: white;
	word-wrap: break-word !important;
	font-family: system-ui;
	background-size: 100%;
}
#container{margin: 0 auto;}
nav{margin: 50px 0; background-color: #cd365c;}
nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
nav ul li{
	display: inline-block;
	background-color: #cd365c;
}
nav a{
	display: block;
	padding: 0 10px;
	color: white;
	font-size: 20px;
	line-height: 60px;
	text-decoration: none;
}
nav a:hover{background-color: #000000}
nav ul ul{
	display: none;
	position: absolute;
	top: 60px;
}
nav ul li:hover > ul{display: inherit;}
nav ul ul li{
	width: 170px;
	float: none;
	display: list-item;
	position: relative;
}
nav ul ul ul li{
	position: relative;
	top: -60px;
	left: 170px;
}
li > a:after{content: '+';}
li > a:only-child:after{content: '';}

If you have any problem to understand this code then you also watch video tutorials