css, 一个向下滑动菜单,怎么让标题 dropdown-title 遮着下拉的菜单 dropdown-list

Question

<template>

  <!-- 向下滑动的下拉菜单 -->
  <div class="dropdown-div" >  
        <div class="dropdown-list">
          <div>111111111111111</div>
          <div>2222222222222222333</div>
          <div>3333333333333333333</div>
          <div>4444444444444</div>
        </div> 

       
       <sapn class="dropdown-title">标题</sapn>      
   <!-- 现在问题是: 怎么让标题 dropdown-title 遮着下拉的菜单  dropdown-list ??? --> 
  </div>
</template>
<script setup lang="ts"></script>

<style lang="scss" scoped>
$height1: 50px;

.dropdown-div{
    position: relative;
    height: $height1;
    margin: auto;
    
    width: 300px;
    background-color: brown;
    .dropdown-title{
      position: absolute;
      display: block;
      color: green;
      top:0;
      z-index: 9999;
     }

    .dropdown-list{
      visibility: hidden;
      position: absolute;
      top: $height1 - 600px;
      background-color: antiquewhite;
      // transition: 1s;
    }
  }

  .dropdown-div:hover .dropdown-list{
    visibility: visible;
    transition: 2s;
    border: 1px solid rgb(160, 160, 173);
    top: $height1 + 6px;
  }

  .dropdown-list div:hover{
    background-color: chocolate;
    cursor: pointer;
  }

  


</style>

请测试 ，我改z-index, 可以遮住下拉菜单，但会造成 下拉菜单 停不住

Answer 1

.dropdown-title设置    pointer-events: none; 点击穿透
.dropdown-list 设置z-index: 1

你题目的解答代码如下：

   .dropdown-title{
      position: absolute;
      display: block;
      color: green;
      top:0;
      z-index: 9999;
      pointer-events: none; /* 点击穿透*/
     }
 
    .dropdown-list{
      visibility: hidden;
      position: absolute;
      top: $height1 - 600px;
      background-color: antiquewhite;
      // transition: 1s;
      z-index: 1; /* 设置z-index: 1 */
    }
 

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!