Posted By
Bajarangi soft ,
Posted On 08-10-2020
Using simple CSS properties: First, we will create unordered list items using HTML and then apply some CSS property to that items to make a navigation bar menu.
Example1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navbar</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: lightgreen;
color: black;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Data Structure</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nav {
background-color: #f32821;
margin: 0px;
overflow: hidden;
}a
#nav ul {
list-style-type: none;
margin: 0px;
float: left;
}
#nav li {
display: inline;
float: left;
padding: 15px 10px;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
a {
position: relative;
}
#nav a:after {
content: '';
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
#nav li:hover {
background-color: #e8dbdb;
}
#nav a:hover {
color: #f30b0b;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Data Structure</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Web Technology</a></li>
</ul>
</div>
</body>
</html>