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>

<ul>

<li><a href="#">ABOUT</a></li>

<li><a href="#">SERVICES</a>

<ul>

<li><a href="#">SERVICES 1</a>

<ul>

</ul>

</li>

<li><a href="#">SERVICES 2</a>

<ul>

</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;
    }

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
}

100

101

102

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<!doctype html>

<html>

<head>

<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>

<div class="col-md-3 py-3 shadow-sm"> <a href="#" class="btn btn-primary">Back to Tutorial</a> </div>

</div>

</section>

<ul>

<li><a href="#">ABOUT</a></li>

<li><a href="#">SERVICES</a>

<ul>

<li><a href="#">SERVICES 1</a>

<ul>

</ul>

</li>

<li><a href="#">SERVICES 2</a>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">GALLERY</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</nav>

</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>

<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;
}

.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;
}

.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