Dropdowm Navigation Menu

NAVIGATION Menu is used to give various sub-links inside a webpage. Here we'll learn how to create a simple Navigation menu using html and CSS only.

HTML Coding of a simple Navigation menu

(How to write a CSS in HTML code)


<style>
*{ margin:0px; padding:0px}
ul{ list-style:none}
a{ text-decoration:none}
.wrap{ width:960px; margin:auto}
.navtop { background:#333; height:40px; color:#fff}
.navtop > ul{ float:left; position:relative; z-index:1}

.navtop form{ float:right; padding:10px 10px}
.navtop > ul > li{ float:left; border-right:1px solid #fff; }
.navtop ul li a{ display:block; padding:10px 20px; color:#ccc}
.navtop ul li a:hover{ background:#f00; color:#fff}
.navtop ul .last{ border:none}
.navtop > ul > li:hover > ul{ display:block}
.navtop > ul > li > ul > li:hover ul{ display:block}
.footer{ background:#333; color:#ccc; text-align:center}
.clear{ clear:both}
.navtop > ul > li > ul li{ height:41px}
.navtop > ul > li > ul{ display:none; position:absolute; background:#333; }
.navtop > ul > li > ul > li > ul{ display:none; position:relative; left:132px; top:-41px; background:#333}
.navtop ul ul li{ border-top:1px solid #fff;}
</style>
<head>
<body>
	<div class="wrap">
		<div class="navtop">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a>
					<ul>
						<li><a href="#">Why We</a></li>
						<li><a href="#">About Us</a></li>
						<li><a href="#">History</a></li>
					</ul>
				</li>
				<li><a href="#">Career</a></li>
				<li><a href="#"><b class="caret"></b>Training</a>
					<ul>
						<li><a href="#">Asp.net</a>
							<ul>
								<li><a href="#">Core  Asp.net</a></li>
								<li><a href="#">Adv .Net</a></li>
								<li><a href="#">MVC</a></li>
							</ul>
						</li>
						<li><a href="#">Web Designing</a>
							<ul>
								<li><a href="#">HTML</a></li>
								<li><a href="#">CSS</a></li>
								<li><a href="#">Photoshop</a></li>
							</ul>				
						</li>
						<li><a href="#">Java</a>
							<ul>
								<li><a href="#">Core Java</a></li>
								<li><a href="#">Adv Java</a></li>
							</ul>
						</li>
						<li><a href="#">Php</a>
								<li><a href="#">Core Phpp>/a<</li>
								<li><a href="#">My Sql</a></li>
								<li><a href="#">Wordpress</a></li>
								<li><a href="#">Joomla</a></li>
						</li>
						<li><a href="#">SQT</a>
							<ul>
								<li><a href="#">HTML</a></li>
								<li><a href="#">CSS</a></li>
								<li><a href="#">Photoshop</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="last"><a href="#">Contact</a></li>
			</ul>
		</div>
		<img src="" alt="">
		
	</div>
</body>
</html>

Browser's view :