.topnav {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
}


.topnav li {
    margin: 4px;
    white-space: nowrap;

}

.topnav a {
  text-decoration: none;
}



.top-dropdown {
    position: relative;
    padding: 0 10px;
  }

  .topnav-img {
    margin: 0 10px;
  }

  
.topnav-top-dropdown > a::after {
    content: "";
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%230E0E0E' viewBox='0 0 32 32'%3E%3Cpath d='M30.485 7.244L16 21.729 1.515 7.244 0 8.757l16 16 16-16z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 10px 8px;
    background-position: 50%;
    padding: 6px 10px;
    transition: transform 0.3s cubic-bezier(0, 0.52, 0, 1);
  }
  .topnav-top-dropdown:hover > a::after {
    transform: rotate(-180deg);
  }

  .li-item {
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
}

.topnav-dropdown-menu {
    list-style: none;
    position: absolute;
    background: white;
    width: 180px;
    top: 18px;
    right: 0;
    opacity: 0;
    visibility: hidden;
    box-shadow: inset 0 1px 0 #c4c4c4;
    border: 1px solid #c4c4c4;
    border-top: none;
    z-index: 9;
}




.top-dropdown:hover .topnav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}