why the chevron doesn't maintain its rotation?

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.

Solution

If you hover the button and them move the cursor to the drop-down you are no longer hovering the button.

Move the button inside the dropdown div and adjust your CSS to hide/show the ul on hover.

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;
  filter: invert(100%)
}

.drop-down {
  position: relative;
}

.drop-down ul {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  text-align: center;
  border-radius: 5px;
  box-shadow: 1px 1px 10px 0px gray;
  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 ul,
.drop-down:hover ul {
  transform: translate(0px, 10px);
  visibility: visible;
  opacity: 1;
}

.btn:hover .chevron,
.drop-down:hover .chevron {
  transform: rotate(90deg);
}

.drop-down ul li:hover {
  color: #fff;
  background-color: #1565c0;
}

<div class="wrapper">

  <div class="drop-down">
    <button class="btn">
      User Profile <img class="chevron" src="https://icons.iconarchive.com/icons/fa-team/fontawesome/256/FontAwesome-Chevron-Right-icon.png" alt="" />
    </button>
    <ul>
      <li>Basket</li>
      <li>Edit</li>
      <li>Courses</li>
      <li>Logout</li>
    </ul>
  </div>
</div>