Vue + CSS implementiert ein Dropdown-Menü

    <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; // Rand oben: 3px; Cursor: Zeiger; Schriftgröße: 15px; Hintergrund: rgba (0,0,0,0,0); // Gliederung: keine; }}

.dropdown { Position: relativ; // display: inline-block; }}

.dropdown-content { Anzeige: keine; Position: absolut; // Hintergrundfarbe: # f9f9f9; Hintergrund: rgba (0,0,0,0,5); Mindestbreite: 104px; Z-Index: 8888; // Kastenschatten: 0px 8px 16px 0px rgba (0,0,0,0,2); }}

.dropdown-content a { color: #fff; Polsterung: 12px 16px; Textdekoration: keine; Bildschirmsperre; Z-Index: 8888; }}

.dropdown-Inhalt a: hover { Schriftgröße: fett; }}

.dropdown: Hover .dropdown-Inhalt { Anzeige: Block; }}