How to create Dropdown Menu-Navigation Bar using HTML and CSS ????
source code content two files (HTML file, CSS file)
1- HTML file (menu.html):-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="menu.css">
<title>Drop Down menu</title>
</head>
<body>
<div class="container">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICE
<ul>
<li>Service A</li>
<li>Service B
<ul>
<li>5 Star</li>
<li>4 Star</li>
<li>3 Star</li>
</ul>
</li>
<li>Service C</li>
</ul>
</li>
<li>LOGIN</li>
</ul>
</div>
</body>
</html>
2- CSS file (menu.css)
*{
margin: 0;
padding: 0;
}
.container ul{
list-style: none;
}
.container ul li{
background-color: rgba(24, 23, 24);
width: 150px;
border: 1px solid white;
line-height: 50px;
text-align: center;
float: left;
font-size: 16px;
color: white;
position: relative;
}
.container ul li:hover{
background-color: rgb(8, 240, 8, 0.651);
}
.container ul ul ul{
margin-left: 150px;
top: 0px;
position: absolute;
}
.container ul ul{
display: none;
}
.container ul li:hover > ul{
display: block;
}
channel link :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g
Add your comment
Signature :- Ayoub Shindi (Dev AAS).
Comments
Post a Comment