radioを使って作られたドロップダウンのメニューです。メニューの項目はすべてradioなので、一つだけ選ぶことができます。「希望の営業所を選んでください」をクリックすると、メニューを閉じます。矢印アイコンは下向きに変わります。ページロードの際の初期値は、メニューを開いた状態ですが、初期値を閉じた状態にするには、htmlの<details open>の"open（赤文字部分）"を外します。

htmlのソース

<fieldset>
    <legend>ドロップダウンのメニュー</legend>
    <details open>
      <summary>希望の営業所を選んでください<span class="material-icons-round">arrow_drop_down</span></summary>
        <div>
          <label>
            <input type="radio" name="radio" checked/>
            <span>東京営業所</span>
          </label>
          <label>
            <input type="radio" name="radio"/>
            <span>北海道営業所</span>
          </label>
          <label>
            <input type="radio" name="radio"/>
            <span>名古屋営業所</span>
          </label>
          <label>
            <input type="radio" name="radio"/>
            <span>京都営業所</span>
          </label>
          <label>
            <input type="radio" name="radio"/>
            <span>大阪営業所</span>
          </label>
          <label>
            <input type="radio" name="radio"/>
            <span>福岡営業所</span>
          </label>
        </div>
      </details>
  </fieldset>

CSSのソース

*,
*:after,
*:before {
  box-sizing: border-box;
}
fieldset {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5rem;
  margin-bottom: 5rem;
  max-width: 400px;
  width: 90%;
}
legend {
  padding-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size:1rem;
}
details {
  position: relative;
}
details summary {
  background-color: #fff;
  border: 2px solid #b5bfd9;
  padding: 0.75rem 0.75rem;
  position: relative;
  border-radius: 8px;
  padding-right: 3rem;
  cursor: pointer;
  list-style: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary:focus {
  outline: 0;
  box-shadow: 0 0 0 4px #b5c9fc;
}
details summary:hover, details summary:focus {
  border-color: #2260ff;
}
details summary span {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  transform-origin: center center;
}
details[open] summary {
  border-color: #2260ff;
  box-shadow: 0 0 0 4px #b5c9fc;
}
details[open] summary span {
  transform: scaleY(-1) translateY(50%);
}
details div {
  margin-top: 8px;
  background-color: #fff;
  border: 2px solid #b5bfd9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  box-shadow: 0 3px 7px 0 #c8cfe1;
}
details div label {
  position: relative;
  cursor: pointer;
}
details div input {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  visibility: hidden;
  position: absolute;
}
details div input:checked + span {
  background-color: #e9efff;
  color: #2260ff;
}
details div span:hover {
  background-color: #e9efff;
}
details div span {
  display: block;
  padding: 0.625rem;
  border-radius: 8px;
  margin-top: 0.25rem;
}