<div class="container">
  <!-- code here -->
  <div class="menu">
    <ul class="menu-list">
      <li class="menu-item">
        <button class="menu-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-right"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
          Share
        </button>
        </li>
      <li class="menu-item">
        <button class="menu-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
          Rename
        </button>
          
        </li>
      <li class="menu-item">
        <button class="menu-button menu-button--black">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
          No status
        </button>
      <ul class="menu-sub-list">
        <li class="menu-item">
          <button class="menu-button menu-button--orange">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
            Needs review
          </button>
            
          </li>
                <li class="menu-item">
                  <button class="menu-button menu-button--purple">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon></svg>
                    In progress
                  </button>
                    
                  </li>
                <li class="menu-item">
                  <button class="menu-button menu-button--green">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path></svg>
                    Approved
                  </button>
                    
                  </li>
                <li class="menu-item"><button class="menu-button menu-button--black menu-button--checked">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
                  No status
                  </button>
                    
                  </li>
      </ul>
      </li>
      <li class="menu-item">
        <button class="menu-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
        Copy Link Address
        </button>
          
        </li>
      <li class="menu-item">
        <button class="menu-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder-plus"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>
          Move to
        </button>
          
        </li>
      <li class="menu-item">
        <button class="menu-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
          Copy to
        </button>
          
        </li>
      <li class="menu-item">
        <button class="menu-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
          Make Private
        </button>
          
        </li>
      <li class="menu-item">
        <button class="menu-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
          Download
        </button>
          
        </li>
      <li class="menu-item">
        <button class="menu-button menu-button--delete"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
          Delete</button></li>
    </ul>
  </div>
</div>

<div class="alert">
  <p>您的浏览器暂时还不支持CSS的<code>:has</code>选择器。请使用 Safari 15.4 或 Chrome Canary 最新版本查看(^_^)!</p>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-bg-primary: #d0d6df;
  --color-bg-primary-offset: #f1f3f7;
  --color-bg-secondary: #fff;
  --color-text-primary: #3a3c42;
  --color-text-primary-offset: #898c94;
  --color-orange: #dc9960;
  --color-green: #1eb8b1;
  --color-purple: #657cc4;
  --color-black: var(--color-text-primary);
  --color-red: #d92027;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  display: grid;
  place-content: center;
  gap: 20px;
  padding: 80px 20px 20px;
}

ul {
  list-style: none outside none;
}

.menu {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-secondary);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
  transition: all .28s linear;
}

.menu-list {
  margin: 0;
  display: block;
  width: 100%;
  padding: 8px;
}

.menu-sub-list {
  display: none;
  padding: 8px;
  background-color: var(--color-bg-secondary);
  border-radius: 0  10px 10px 0;
  box-shadow: 0 10px 20px rgba(64, 64, 64, 0.15);
  position: absolute;
  left: calc(100% + 8px);
  right: 0;
  z-index: 100;
  width: 100%;
  top: 0;
  flex-direction: column;
  border: 2px solid #d32c2c;
  border-left: transparent;
}

.menu-sub-list:hover {
  display: flex;
}
.menu-item {
  position: relative;
}

.menu-button {
  font: inherit;
  border: 0;
  padding: 8px;
  width: 100%;
  border-radius: 8px;
  text-align: left;
  display: flex;
  align-items: center;
  position: relative;
  background-color: var(--color-bg-secondary);
  cursor: pointer;
}

.menu-button:hover {
  background-color: var(--color-bg-primary-offset);
}
.menu-button:hover + .menu-sub-list {
  display: flex;
}

.menu-button:hover svg {
  stroke: var(--color-text-primary);
}
.menu-button svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  stroke: var(--color-text-primary-offset);
}

.menu-button--delete:hover {
  color: var(--color-red);
}
.menu-button--delete:hover svg {
  stroke: var(--color-red);
}
.menu-button--orange svg {
  stroke: var(--color-orange);
}
.menu-button--green svg {
  stroke: var(--color-green);
}
.menu-button--purple svg {
  stroke: var(--color-purple);
}
.menu-button--black svg {
  stroke: var(--color-black);
}

.menu:has(button:hover) {
  border: 2px solid #d32c2c;
}

.menu-list:has(button:hover) button:not(:hover){
  filter: opacity(0.5) blur(1px);
}

.menu-item:has(button + ul)  > button::after {
  content: "➤";
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 32px;
  height: 100%;
  top: 0;
  position: absolute;
  right: -22px;
}


.alert {
  display: flex;
  justify-content: center;
  position: fixed;
  padding: 1rem;
  background-color: #ffeeee;
  font-size: 0.75rem;
  top: 0;
  left: 0;
  right: 0;
  color: red;
}

.alert code {
  display: inline-flex;
  padding: 0.25em 0.5em;
  font-weight: bold;
  background-color: #3f51b5;
  color: #fff;
  border-radius: 3px;
  margin: 0 5px;
}

@supports selector(:has(works)) {
  .alert {
    display: none;
  }

  body {
    padding: 20px;
  }
}