n

HTML

<div class="nav">
        <ul class="ml">
          <li class="mi"><a class="lk" href="#">Dashboard</a></li>

<li class="mi sub">
            <a class="lk" href="#">Dropdown</a>
            <a class="btn" href="#">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
                  d="M16.2071 9.79289C15.8166 9.40237 15.1834 9.40237 14.7929 9.79289L12 12.5858L9.20711 9.79289C8.81658 9.40237 8.18342 9.40237 7.79289 9.79289C7.40237 10.1834 7.40237 10.8166 7.79289 11.2071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.2071 11.2071C16.5976 10.8166 16.5976 10.1834 16.2071 9.79289Z"/>
              </svg>
            </a>
            <div class="nav">
              <ul class="ml">
                <li class="mi"><a class="lk" href="#">Overview</a></li>
                <li class="mi"><a class="lk" href="#">My downloads</a></li>
              </ul>
            </div>
          </li>

<li class="mi"><a class="lk" href="#">Ernings</a></li>
        </ul>
      </div>
    </li>

<li class="mi"><a class="lk" href="#">Services</a></li>
    <li class="mi"><a class="lk" href="#">Pricing</a></li>

<li class="mi sub">
      <a class="lk" href="#">Contact</a>
      <a class="btn" href="#">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
          <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
            d="M16.2071 9.79289C15.8166 9.40237 15.1834 9.40237 14.7929 9.79289L12 12.5858L9.20711 9.79289C8.81658 9.40237 8.18342 9.40237 7.79289 9.79289C7.40237 10.1834 7.40237 10.8166 7.79289 11.2071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.2071 11.2071C16.5976 10.8166 16.5976 10.1834 16.2071 9.79289Z"/>
        </svg>
      </a>

<div class="nav">
        <ul class="ml">
          <li class="mi"><a class="lk" href="#">Address</a></li>
          <li class="mi"><a class="lk" href="#">Email</a></li>
          <li class="mi"><a class="lk" href="#">Phone</a></li>
        </ul>
      </div>
    </li>
  </ul>
</div>

CSS

:root {
  --t: #2c2f32;
  --p: #1dc071;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.lg {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lg img {
  height: 50px;
}

.ln {
  font-size: 20px;
  font-weight: 700;
  color: var(--t);
}

.ml {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mi {
  display: flex;
  align-items: center;
  position: relative;
}

.mi:hover > .lk {
  color: var(--p);
}

.btn {
  flex-shrink: 0;
  transition: 0.4s linear;
}

.btn svg {
  width: 18px;
  height: 18px;
  fill: var(--t);
}

.sub .ml {
  background: #fff;
}

.sub .mi {
  display: none;
}

.sub .nav .sub {
  display: flex;
  align-items: center;
  position: relative;
}

.sub .nav .sub:hover > .btn {
  transform: rotate(-90deg);
}

.sub .nav .sub:hover > .nav {
  display: block;
}

.sub .nav .sub .nav {
  position: absolute;
  right: -42px;
  top: 0;
  display: none;
}

.sub .nav .sub .nav::after {
  content: "";
  display: block;
  height: 50px;
  width: 30px;
  position: absolute;
  left: -45px;
}

.sub:hover .ml {
  display: block;
}

.sub .ml {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 150px;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  border-radius: 4px;
  gap: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  display: none;
  animation: fadeIn 0.5s linear;
}

.sub .mi {
  display: block;
  width: 100%;
  position: relative;
}

.sub .lk {
  display: block;
  width: 100%;
  padding-block: 8px;
}

.lk {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--t);
  font-size: 14px;
  font-weight: 500;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Trang chủ

HTML

CSS

JS