Applies a styled dropdown menu

by ShaCP

HTML

<div class="select">
  <div class="selected-option">Selected Option</div>
  <ul class="options">
    <li class="option">Option 1</li>
    <li class="option">Option 2</li>
  </ul>
</div>

CSS

/* Apply box-sizing globally or to relevant elements */
*, *:before, *:after {
  box-sizing: border-box;
}

.select {
  position: relative; /* Needed for absolute positioning of options & stacking */
  width: 300px;

  /* --- Shadow applied ONLY to the parent --- */
  /* This shadow will now correctly appear around both children */
  box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4);

  /* --- Optional: Parent radius shapes the shadow --- */
  /* You can keep this or remove it if you only want the children rounded */
  border-radius: 5px;

  /* --- REMOVED overflow: hidden; --- */
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.selected-option,
.option {
  padding: 5px;
}

.options {
  background-color: white; /* Essential to cover content below */
  position: absolute;
  width: 100%;   /* Take full width of .select */
  top: 100%;     /* Position directly below .selected-option */
  left: 0;

  /* --- Bottom radius for the options list --- */
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  /* Ensure it's above other page content if needed */
  z-index: 10;
}

.selected-option {
  background-color: white; /* Essential to cover parent background/shadow */

  /* --- Top radius for the selected option --- */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

  /* --- Lift it above the parent's shadow --- */
  position: relative; /* Creates stacking context */
  z-index: 1;         /* Lifts its background above parent's shadow */
}

/* Optional: Style for options on hover/focus */
.option:hover {
  background-color: #eee;
  cursor: pointer;
}