Vue + css implementa um menu suspenso

    <div class="dropdown fleft">
      <!-- <button class="dropbtn listxx">更多赛事</button> -->
      <div class="dropbtn listxx">更多赛事</div>
      <div class="dropdown-content">
        <a href="javascript:;" :data-id="item.id" :data-index="index+8" @click="dianjilist($event)" v-for="(item, index) in listqt" :key="index">{
   
   { item.name }}</a>
      </div>
    </div>
2./* 下拉菜单 */

.dropbtn { // border: none; // margin-top: 3px; cursor: ponteiro; tamanho da fonte: 15px; fundo: rgba (0,0,0,0,0); // esboço: nenhum; }

.dropdown { posição: relativa; // display: inline-block; }

. dropdown-content { display: none; posição: absoluta; // background-color: # f9f9f9; fundo: rgba (0,0,0,0,5); largura mínima: 104px; índice z: 8888; // box-shadow: 0px 8px 16px 0px rgba (0,0,0,0.2); }

. dropdown-content a { color: #fff; preenchimento: 12px 16px; decoração de texto: nenhum; display: bloco; índice z: 8888; }

. dropdown-content a: hover { font-weight: bold; }

.dropdown: hover .dropdown-content { display: block; }