Hello friends, welcome to our new post thie post contains the source code of vertical navigation bar created with only html and css. you can watch our video to see how it looks like and also you can subscribe our channel for more cool projects.
NAVIGATION BAR
 |
Vertical Navigation Bar With Hover Effects |
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vertical navigation bar </title>
<style>
body{
background-color: rgb(251, 255, 21);
}
ul {
list-style: none;
padding: 0px 0px;
margin: 50px auto;
background-color: rgb(0, 0, 0);
height: 500px;
line-height: 100px;
width: 600px;
font-size: 30px;
font-family:'Times New Roman', Times, serif;
}
li {
text-align: center;
}
a {
text-decoration: none;
display: block;
color:rgb(255, 255, 255);
}
a:hover {
background-color: rgb(4, 21, 255);
}
</style>
</head>
<body>
<ul>
<li ><a href="#">Home</a></li>
<li ><a href="#">About</a></li>
<li ><a href="#">Products</a></li>
<li ><a href="#">Services</a></li>
<li ><a href="#">Contact</a></li>
</ul>
</body>
</html>
Post a Comment