Vue + css implementa un menú desplegable

    <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 { // borde: ninguno; // margen superior: 3px; cursor: puntero; tamaño de fuente: 15px; fondo: rgba (0,0,0,0.0); // esquema: ninguno; }

.dropdown { posición: relativa; // mostrar: bloque en línea; }

.dropdown-content { display: none; posición: absoluta; // color de fondo: # f9f9f9; fondo: rgba (0,0,0,0.5); ancho mínimo: 104px; índice z: 8888; // caja-sombra: 0px 8px 16px 0px rgba (0,0,0,0.2); }

.dropdown-content a { color: #fff; relleno: 12px 16px; decoración de texto: ninguna; bloqueo de pantalla; índice z: 8888; }

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

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