:focus-within实现下拉列表实例页面

展示

代码

• HTML：

  <div class="cs-bar">         
      <div class="cs-details">
          <a href="javascript:" class="cs-summary">我的消息</a> 
          <div class="cs-datalist">
              <a href class="cs-datalist-a">我的回答<sup class="cs-datalist-sup">12</sup></a>
              <a href class="cs-datalist-a">我的私信</a>
              <a href class="cs-datalist-a">未评价订单<sup class="cs-datalist-sup">2</sup></a>
              <a href class="cs-datalist-a">我的关注</a>
          </div>
      </div>
  </div>

• CSS：

  .cs-bar {
      background-color: #e3e4e5;
      color: #888;
      padding-left: 40px;
  }
  .cs-details {
      display: inline-block;
      text-align: left;
  }
  .cs-summary {
      display: inline-block;
      padding: 5px 28px;
      text-indent: -15px;
      user-select: none;
      position: relative;
      z-index: 1;
  }
  .cs-summary::after {
      content: "";
      position: absolute;
      width: 12px; height: 12px;
      margin: 4px 0 0 .5ch;
      background: url(./icon-arrow.svg) no-repeat;
      background-size: 100% 100%;
      transition: transform .2s;
  }
  .cs-details:focus-within .cs-summary,
  .cs-summary:hover {
      background-color: #fff;
      box-shadow: inset 1px 0 #ddd, inset -1px 0 #ddd;
  }
  .cs-details:focus-within .cs-summary::after {
      transform: rotate(180deg);
  }
  .cs-datalist {
      display: none;
      position: absolute;
      min-width: 100px;
      border: 1px solid #ddd;
      background-color: #fff;
      margin-top: -1px;
  }
  .cs-details:focus-within .cs-datalist {
      display: block;
  }
  .cs-datalist-a {
      display: block;
      padding: 5px 10px;
      transition: background-color .2s, color .2s;
      color: inherit;
  }
  .cs-datalist-a:hover {
      background-color: #f5f5f5;
  }
  .cs-datalist-a:active {
      background-color: #f0f0f0;
      color: #555;
  }
  .cs-datalist-sup {
      position: absolute;
      color: #cd0000;
      font-size: 12px;
      margin-top: -.25em;
      margin-left: 2px;
  }