html top menu bar with submenu and submenu code example

Example 1: simple html multilevel dropdown menu for navbar

<ul id="menu">
	<li class="parent"><a href="#">Popular Toys</a>
	<ul class="child">
		<li class="parent"><a href="#">Video Games <span class="expand">»</span></a>
			<ul class="child">
			<li><a href="#">Car</a></li>
			<li><a href="#">Bike Race</a></li>
			<li><a href="#">Fishing</a></li>
			</ul>
		</li>
		<li><a href="#">Barbies</a></li>
		<li><a href="#">Teddy Bear</a></li>
		<li><a href="#">Golf Set</a></li>
	</ul>
	</li>
	<li class="parent"><a href="#">Recent Toys</a>
	<ul class="child">			
		<li><a href="#">Yoyo</a></li>
		<li><a href="#">Doctor Kit</a></li>
		<li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a>
			<ul class="child">
			<li><a href="#" nowrap>Cards</a></li>
			<li><a href="#" nowrap>Numbers</a></li>
			</ul>
		</li>
		<li><a href="#">Uno Cards</a></li>
	</ul>
	</li>
	<li class="parent"><a href="#">Toys Category</a>
	<ul class="child">			
		<li><a href="#">Battery Toys</a></li>
		<li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a>
			<ul class="child">
			<li><a href="#">Cars</a></li>
			<li><a href="#">Aeroplane</a></li>
			<li><a href="#">Helicopter</a></li>
			</ul>
		</li>
		<li><a href="#">Soft Toys</a>
		</li>
		<li><a href="#">Magnet Toys</a></li>
	</ul>
	</li>
</ul>

Example 2: create dynamic navigation menu css

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>Top Navigation Example</h2>
  <p>Some content..</p>
</div>

</body>
</html>

Tags:

Css Example

Recent Posts