Update:- New tutorial added in HTML section. How to Create Responsive Login Page in HTML without Bootstrap?

How to create Horizontal Submenu bar in HTML?

View Live Demo

In this tutorial we are going to create Horizontal Submenu bar in HTML with CSS. You will learn how to create horizontal menu bar in HTML with CSS in step by step learning method.

If you found any difficulty in this tutorial, then you can ask any question by posting comment in comment box.

horizontal submenu bar

Step 1.

Open Notepad or Adobe Dreamweaver or any other Html editor. I am using Dreamweaver. I will suggest to you, use Notepad editor for better practise.

Step 2.

Copy the below complete HTML code and paste it in your editor. 

    
  <!DOCTYPE html>
  <head>
  <title>Horizontal Menu bar</title>
  </head>

  <body>
  <!-- div align in center -->
  <div id="menubar">
  <ul>
 <a href="#"><li>Home</li></a>
  <a href="#"><li>Tutorial</li></a>
  <li>Wallpaper ≡
  	<ul>
  		<a href="#"><li>Nature</li></a>
		<a href="#"><li>Romantic</li></a>
		<a href="#"><li>Love</li></a>
  	</ul>
  </li> 
  <li>Team Work ≡
  	<ul>
  		<a href="#"><li>Project 1</li></a>
  		<a><li>Project 2 ≡
  			<ul>
  				<li>Module 2</li>
  				<li>Module 2</li>
  				<li>Module 3</li>
  				<li>Module 4</li>
  			</ul>
			</li>
			<li>Project 3</li>
			</a>
  </ul>
  </li>
  <a href="#"><li>Feedback</li></a>
  <a href="#"><li>Contact us</li></a>
  <a href="#"><li>About us</li></a>
  <a href="#"><li>Blog</li></a>
</ul>
  </div>
    
  </body>
  </html>

Step 3.

Now apply the CSS to all menus for better presentation. First create CSS <style> .. </style> tag in between <head> .. </head> tag like below. 


    <head>
    <style type="text/css">
    
    all css code come here....
    
    </style>
    </head>

Now copy the below CSS code and paste it in between <style> .. </style> tag. 

    
    body{background-color:#84bf76;}
    #menubar{width:100%;
	margin-left:auto;
	text-align:center;
	margin-right:auto;
	margin-top:80px;
	height:auto;
	}

   ul {
  		text-transform:uppercase;
  		text-align: left;
  		display: inline;
  		margin: 0;
  		padding: 15px 4px 17px 0;
  		list-style: none;
  		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}
	ul li {
  		font: bold 12px/18px sans-serif;
  		display: inline-block;
  		margin-right: -5px;
  		position: relative;
  		padding: 15px 20px;
  		background: #f7f7f7;
  		color:#6aa25d;
  		cursor: pointer;
  		-webkit-transition: all 0.2s;
  		-moz-transition: all 0.2s;
  		-ms-transition: all 0.2s;
  		-o-transition: all 0.2s;
  		transition: all 0.2s;
  	}
	ul li:hover {
  		background: #6aa25d;
  		color: #f7f7f7;
	}

	
/*submenu css starting-------------*/
	li ul{
		display: none;
		background-color: #f7f7f7;
		position: absolute;
		margin-top: 15px;
		margin-left: -20px;
		padding:0px 0px 0px 0px;
		
	}
	
	li ul a li{
		width:8em;
		border-bottom: 1px solid #e7e7e7;
	}
	
	li:hover ul{
		display: block;
	}
	li ul a li:hover{
		width:8em;
	}
	
	/*----------------------------------*/
	li ul li ul li
	{
		display:none;
		margin-left: 0px;
		position:relative;
	}
	li ul li:hover ul li{
		display:block;			
	}

	ul ul ul {
  	left: 100%;
  	top: 0;
	margin-left: 0px;
	}
      }

Step 4. Final Step

Now save your page with any name with .html extension. Like horizontal-submenu-bar.html. After saving the file, open the file by double clicking on it and see your final output.

View Live Demo
PREVIOUS
NEXT

Post Your Comment

↑