Well I wanted to create mini project to test my CSS skills so I have decided to create a drop down menu.
so I started by writing HTML codes:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hover menu</title>
<link rel="stylesheet" href="CSS/style.css" />
</head>
<body>
<div class="wrapper">
<div>
<button class="btn">
User Profile <img class="chevron" src="image/chevron.svg" alt="" />
</button>
<div class="drop-down">
<ul>
<li>Basket</li>
<li>Edit</li>
<li>Courses</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Then I wrote the CSS codes and I think this is the part that has a problem but I couldn’t find it by reviewing it for hours
CSS
@font-face {
font-family: "Poppins";
src: local("Poppins"), url(../font/Poppins-Regular.ttf) format(truetype);
}
html {
box-sizing: border-box;
}
* {
list-style: none;
margin: 0px;
padding: 0px;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
body {
font-family: "Poppins";
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.btn {
position: relative;
color: #fff;
background-color: #1565c0;
border: none;
border-radius: 5px;
font-size: 20px;
padding: 10px;
cursor: pointer;
transition: all 400ms;
}
.chevron {
width: 20px;
vertical-align: middle;
transition: all 300ms linear;
}
.drop-down {
position: absolute;
text-align: center;
border-radius: 5px;
box-shadow: 1px 1px 10px 0px gray;
visibility: hidden;
opacity: 0;
transition: all 400ms ease-out;
}
.drop-down ul li {
width: 150px;
border-radius: 2px;
padding: 5px;
transition: all 200ms linear 100ms;
cursor: pointer;
}
/* Actions */
.btn:hover {
background-color: #0d47a1;
}
.btn:hover .chevron {
transform: rotate(180deg);
}
.btn:hover + .drop-down,
.drop-down:hover {
transform: translate(0px, 10px);
visibility: visible;
opacity: 1;
}
> Looks like hover is not working here!!!!
.btn:hover .chevron,
.drop-down:hover .chevron {
transform: rotate(180deg);
}
.drop-down ul li:hover {
color: #fff;
background-color: #1565c0;
}
I Expected that after hovering the button an then hovering the drop down list the chevron that rotated while hovering the button maintains its rotation please help.
New contributor
Behzad Kaviyani is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.