Create a Vertical menu & Horizontal Navigation Bar using HTML CSS

In this tutorial, I explore two different methods for creating a Vertical menu & Horizontal Navigation Bar using HTML CSS. The snippet is responsive.

First, we will learn how to create a Horizontal Navigation Bar using HTML CSS.

The HTML Code for Horizontal Navigation Bar

Table of Contents

Let’s start with the HTML. We have a simple unordered list <ul><li></li></ul> of hyperlinks. Each list item has a classname.

<div class="navigation">
<nav id="navmenu">
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a>
<ul>
<li><a href="#">SERVICES 1</a>
<ul>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 2</a></li>
</ul>
</li>
<li><a href="#">SERVICES 2</a>
<ul>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>

We will be clearing out the margin and padding on the body.

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-decoration: none;
    }

Subsequently, we’ll style the list to hide the bullets and provides it a background color. Clearing the margin will make it hug the top of the page which we need.

create a Horizontal Navigation Bar using HTML CSS.

We will write the style CSS for ul inside the #navmenu.

The CSS code

body {
	font-family: Arial, Helvetica, sans-serif;
}
* {
	margin: 0;
	padding: 0;
	text-decoration: none
}
.navigation {
	background: #610702;
}
nav {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
ul {
	margin-bottom: 0px;
}
#navmenu, #navmenu ul, #navmenu ul li, #navmenu ul li a, #navmenu 
#navmenu:after, #navmenu > ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0
}
#navmenu #head-mobile {
	display: none
}
#navmenu > ul > li {
	float: left
}
#navmenu > ul > li > a {
	padding: 17px;
	font-size: 12px;
	letter-spacing: 1px;
	text-decoration: none;
	color: #ddd;
	font-weight: 700;
}
#navmenu > ul > li:hover > a, #navmenu ul li.active a {
	color: #fff
}
#navmenu > ul > li:hover, #navmenu ul li.active:hover, #navmenu ul li.active, #navmenu ul li.has-sub.active:hover {
	background: #c10d03!important;
	-webkit-transition: background .3s ease;
	-ms-transition: background .3s ease;
	transition: background .3s ease;
}
#navmenu > ul > li.has-sub > a {
	padding-right: 30px
}
#navmenu ul ul {
	position: absolute;
	left: -9999px;
	z-index: 999;
}
#navmenu ul ul li {
	height: 0;
	-webkit-transition: all .25s ease;
	-ms-transition: all .25s ease;
	background: #610702;
	border-bottom: 1px solid rgb(204 204 204 / 23%);
	transition: all .25s ease
}
#navmenu ul ul li:hover {
}
#navmenu li:hover > ul {
	left: auto
}
#navmenu li:hover > ul > li {
	height: 35px
}
#navmenu ul ul ul {
	margin-left: 100%;
	top: 0
}
#navmenu ul ul li a {
	padding: 11px 15px;
	width: 170px;
	font-size: 12px;
	text-decoration: none;
	color: #ddd;
	font-weight: 400;
}
#navmenu ul ul li:last-child > a, #navmenu ul ul li.last-item > a {
	border-bottom: 0
}
#navmenu ul ul li:hover > a, #navmenu ul ul li a:hover {
	color: #fff
}
#navmenu ul ul li.has-sub:hover, #navmenu ul li.has-sub ul li.has-sub ul li:hover {
	background: #c10d03;
}
#navmenu ul ul ul li.active a {
	border-left: 1px solid #333
}
#navmenu > ul > li.has-sub > ul > li.active > a, #navmenu > ul ul > li.has-sub > ul > li.active> a {
	border-top: 1px solid #333
}

Final code: The following is the combination of all of the above HTML and CSS code snippets.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation Bar | HTML CSS3 Tutorials</title>
<style>
body {
	font-family: Arial, Helvetica, sans-serif;
}
* {
	margin: 0;
	padding: 0;
	text-decoration: none
}
.navigation {
	background: #610702;
}
nav {
	position: relative;
	width: 100%;
	margin: 0 auto;
}
ul {
	margin-bottom: 0px;
}
#navmenu, #navmenu ul, #navmenu ul li, #navmenu ul li a {
	border: 0;
	list-style: none;
	line-height: 1;
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
#navmenu:after, #navmenu > ul:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0
}

#navmenu > ul > li {
	float: left
}
#navmenu > ul > li > a {
	padding: 17px;
	font-size: 12px;
	letter-spacing: 1px;
	text-decoration: none;
	color: #ddd;
	font-weight: 700;
}
#navmenu > ul > li:hover > a, #navmenu ul li.active a {
	color: #fff
}
#navmenu > ul > li:hover, #navmenu ul li.active:hover, #navmenu ul li.active, #navmenu ul li.has-sub.active:hover {
	background: #c10d03!important;
	-webkit-transition: background .3s ease;
	-ms-transition: background .3s ease;
	transition: background .3s ease;
}
#navmenu > ul > li.has-sub > a {
	padding-right: 30px
}
#navmenu ul ul {
	position: absolute;
	left: -9999px;
	z-index: 999;
}
#navmenu ul ul li {
	height: 0;
	-webkit-transition: all .25s ease;
	-ms-transition: all .25s ease;
	background: #610702;
	border-bottom: 1px solid rgb(204 204 204 / 23%);
	transition: all .25s ease
}
#navmenu ul ul li:hover {
}
#navmenu li:hover > ul {
	left: auto
}
#navmenu li:hover > ul > li {
	height: 35px
}
#navmenu ul ul ul {
	margin-left: 100%;
	top: 0
}
#navmenu ul ul li a {
	padding: 11px 15px;
	width: 170px;
	font-size: 12px;
	text-decoration: none;
	color: #ddd;
	font-weight: 400;
}
#navmenu ul ul li:last-child > a, #navmenu ul ul li.last-item > a {
	border-bottom: 0
}
#navmenu ul ul li:hover > a, #navmenu ul ul li a:hover {
	color: #fff
}
#navmenu ul ul li.has-sub:hover, #navmenu ul li.has-sub ul li.has-sub ul li:hover {
	background: #c10d03;
}
#navmenu ul ul ul li.active a {
	border-left: 1px solid #333
}
#navmenu > ul > li.has-sub > ul > li.active > a, #navmenu > ul ul > li.has-sub > ul > li.active> a {
	border-top: 1px solid #333
}
</style>
</head>

<body>
<section class="py-2" style="border-bottom: 1px solid #e6e1e1;">
<div class="container">
<div class="row">
<div class="col-md-9 py-3 shadow-sm"> <img src="#" alt="HTML CSS3 Tutorials" /> </div>
<div class="col-md-3 py-3 shadow-sm"> <a href="#" class="btn btn-primary">Back to Tutorial</a> </div>
</div>
</div>
</section>
<section class="navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navigation">
<nav id="navmenu">
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a>
<ul>
<li><a href="#">SERVICES 1</a>
<ul>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 2</a></li>
</ul>
</li>
<li><a href="#">SERVICES 2</a>
<ul>
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

Creating the Vertical Navigation bar (Vertical menu)

Now we will write the HTML and CSS code for the vertical navigation bar. The HTML code looks like.

To create a vertical navigation bar, we can style the <a> elements inside the unordered list <ul>.

<ul class="vertical">
<li><a  href="#">Home</a></li>
<li><a class="active" href="#">About Us</a></li>
<li><a href="#">Gallery</a></li>
 <li><a href="#">Contact</a></li>
</ul>

display: block; – Displaying the hyperlinks as block parts make the entire hyperlink area clickable.

active class: Add an “active” class to the hyperlink to highligt the current page.

.vertical li a.active {
  background-color: #c10d03;
  color: #fff;
}

CSS code

.vertical {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #efefef;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.vertical li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.vertical li a.active {
  background-color: #c10d03;
  color: #fff;
}

.vertical li a:hover {
  background-color:#020202;
  color: #fff;
}

Conclusion

We hope the vertical navigation bar using HTML and CSS is quite a simple tutorial.

Create a Vertical menu & Horizontal Navigation Bar using HTML CSS

The HTML Code for Horizontal Navigation Bar

The CSS code

Creating the Vertical Navigation bar (Vertical menu)

CSS code

Read also

How to design Bootstrap Vertical Tab

How to Create Bootstrap 5 Cards Templates