A simple horizontal navigation bar
Html:
<html>
<head><title>menu bar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<a href="">Home</a>
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="content">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Services</button>
<div class="content">
<a href="">Web design</a>
<a href="">SEO</a>
<a href="">Web </a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Contact</button>
<div class="content">
<a href="">iteam1m1</a>
<a href="">iteam2</a>
<a href="">iteam3</a>
</div>
</div>
<a href="">Help</a>
</div>
</div>
</body>
</html>CSS:
.navbar{
background-color:black;
overflow:hidden;
}
.navbar a{
text-decoration:none;
text.algin: center;
padding: 14px 16px;
float: left;
color: white;
}
.navbar a:hover
{
background-color:brown;
}
.dropdown{
float:left;
overflow:hidden;
}
.dropdown .dropbtn
{
text-decoration:none;
text-align:center;
padding:18px 14px;
color:aliceblue;
float:left;
border:none;
outline:none;
background-color:black;
}
.navbar a:hover, .dropdown:hover .dropbtn
{
background-color:brown;
}
.content
{
position:absolute;
min-width:160px;
z-index:1;
box-shadow: 0px 1px 1px 1px black;
margin-top:50px;
display:none;
}
.content a{
display:block;
float:none;
background-color:black;
text-decoration:none;
text-align:left;
padding:14px 16px;
}
.dropdown:hover .content
{
display:block;
}