In this tutorial, you will learn how to create a dropdown menu hover with HTML and CSS. this video will walk through the HTML, CSS code, so that you create this project
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Dropdown menu with html and css</title>
</head>
<body>
<header>
<ul class="navbar">
<li class="logo">
<img src="img/logo.png" alt="top-logo">
</li>
<li> <a href="#" class="link">Home</a> </li>
<li class="about"> <a href="#" class="link">About</a>
<ul class="dropmenu">
<li><a href="#" class="dropLink"> Resume</a> </li>
<li><a href="#" class="dropLink"> Download</a> </li>
</ul>
</li>
<li><a href="#" class="link">Work</a> </li>
<li><a href="#" class="link">Skills</a> </li>
<li><a href="#" class="link">Contact</a> </li>
</ul>
</header>
</body>
</html>CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
header{
background: #feca57;
height: 100vh;
}
header .navbar{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
list-style: none;
}
header .navbar .logo img{
width: 100px;
height: 50px;
}
header .navbar li .link{
flex: 0 0 auto;
text-decoration: none;
padding: 5px 20px;
color:#222f3e ;
font-size: 16px;
font-weight: 600;
}
header li:nth-child(1){
margin-right: auto;
}
header li .link:hover{
background: #222f3e;
color: #fff;
border-bottom: 4px solid #fff ;
transition: .7s;
border-radius: 5px;
}
header .navbar .dropmenu{
list-style: none;
background: #fff;
width: 200px;
height: 60px;
position: absolute;
top: 55px;
right: 146px;
display: none;
}
header .navbar .dropmenu li{
margin-bottom: 5px;
}
header ul .dropmenu li .dropLink{
text-decoration: none;
display: block;
color: #000000;
font-weight: 600;
padding: 10px 20px;
background: #fff;
}
header ul .dropmenu li .dropLink:hover{
background: #000000;
color: #fff;
}
header .navbar .about:hover .dropmenu{
display: block;
}
If you any issue please share your comment below
(Visited 1,010 times, 1 visits today)
