CSS Anchor-size Function Basic

<!DOCTYPE html>
<title>My Example</title>

/* 1. Define the anchor element */
  .dropdown-btn {
    anchor-name: --menu-anchor;
    padding: 15px 30px;
    font-size: 1.1em;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Giving it a specific width to demonstrate the matching size */
    width: 250px;
    text-align: left;
    display: flex;
    justify-content: space-between;
  }
  
  .dropdown-btn::after {
    content: "â–¼";
    font-size: 0.8em;
  }

/* 2. Position and size the menu relative to the anchor */
  .dropdown-menu {
    position: absolute;
    
    /* Position it directly below the button, aligned to the left edge */
    top: anchor(--menu-anchor bottom);
    left: anchor(--menu-anchor left);
    margin-top: 1px;
    
    /* SIZE IT to exactly match the width of the anchor button */
    width: anchor-size(--menu-anchor width);
    
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    font-family: sans-serif;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    
    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
  }
  
  .dropdown-menu li {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
  }
  
  .dropdown-menu li:last-child {
    border-bottom: none;
  }
  
  .dropdown-menu li:hover {
    background-color: #f1f1f1;
    cursor: pointer;
  }
  
  /* Show the menu on hover or focus */
  .dropdown-btn:hover + .dropdown-menu,
  .dropdown-btn:focus + .dropdown-menu,
  .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.9em;
    color: #d9534f;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
  }
  
  /* Hide the menu completely if anchor positioning isn't supported */
  @supports not (width: anchor-size(width)) {
    .dropdown-menu {
      display: none !important;
    }
  }
</style>

<div class="container">
  <button class="dropdown-btn">Select an Option</button>
  <ul class="dropdown-menu">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  
  <div class="warning-msg">
    <em>Note: If you do not see a dropdown menu when hovering the button, your browser does not currently support the CSS Anchor Positioning API.</em>
  </div>
</div>