Vue + css는 드롭 다운 메뉴를 구현합니다.

    <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 { // 테두리 : 없음; // 여백-상단 : 3px; 커서 : 포인터; 글꼴 크기 : 15px; 배경 : rgba (0,0,0,0.0); // 개요 : 없음; }

.dropdown { 위치 : 상대; // 표시 : inline-block; }

.dropdown-content { 표시 : 없음; 위치 : 절대; // 배경색 : # f9f9f9; 배경 : rgba (0,0,0,0.5); 최소 너비 : 104px; Z- 색인 : 8888; // 상자 그림자 : 0px 8px 16px 0px rgba (0,0,0,0.2); }

.dropdown-content a { color : #fff; 패딩 : 12px 16px; 텍스트 장식 : 없음; 디스플레이 : 블록; Z- 색인 : 8888; }

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

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