如何使纯 css 下拉菜单与两个可重定向的链接一起工作？

Question

我已经创建了一个下拉联系菜单，其中包含 2 个链接。但似乎当我点击联系按钮然后点击所需的链接时，它只是关闭下拉菜单而不将用户重定向到任何地方。我在某处读到这是因为另一个鼠标按下事件会触发 :focus 基本上不聚焦？我怎样才能使这个菜单工作？我只知道一点点 javascript。

下面的 HTML -

<div class="contact">
            <button class="contactbtn">Contact</button>
            <ul>
               <li>
                  <p>For Any Enquiries?</p>
               </li>
               <li><a id="mail" href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
               <li>+44 7463 070158</li><br>
               <li><a id="ig" href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
            </ul>
         </div>

<div class="contact">
            <button class="contactbtn">Contact</button>
            <ul>
               <li>
                  <p>For Any Enquiries?</p>
               </li>
               <li><a id="mail" href="mailto:hello@shekleung.com">hello@shekleung.com</a></li>
               <li>+44 7463 070158</li><br>
               <li><a id="ig" href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
            </ul>
         </div>

    .contact {
       position: relative;
       top: 5vh;
       right: 0;
       font-family: Helvetica, sans-serif;
       height: 10vh;
       letter-spacing: 3px;
    
    }
    
    .contactbtn {
       color: black;
       text-transform: uppercase;
       font-size: 1.5rem;
       font-weight: bold;
       background: none;
       border: none;
       text-decoration: none;
       cursor: pointer;
       outline: none;
    
    }
    
    .contactbtn:hover {
       opacity: 0.6;
    }
    
    .contact ul,
    .contact-a ul {
       position: absolute;
       left: -10vw;
       margin-top: 20px;
       width: 300px;
       height: 150px;
       font-size: 1.5rem;
       font-weight: bold;
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       align-items: flex-end;
       list-style: none;
       text-transform: uppercase;
       font-size: 1rem;
       opacity: 0;
       pointer-events: none;
       transform: translateY(-10px);
       transition: all 0.4s ease;
    }
    
    .contact a,
    .contact-a a {
       color: black;
       text-decoration: none;
    }
    
    .contact a:hover,
    .contact-a a:hover {
       /* opacity: 0.6; */
       background-color: var(--grCol3);
    }
    
    .contactbtn:focus+ul {
       opacity: 1;
       pointer-events: all;
       transform: translateY(0);
       outline: none;
    }
    

    .contact-a {
       position: absolute;
       top: 5vh;
       left: 5vw;
       font-family: Helvetica, sans-serif;
       height: 10vh;
       letter-spacing: 3px;
       color: var(--grCol3);
    }
    
    .contact-a ul {
       align-items: flex-start;
       left: 0;
    }

Answer 1

那是因为你设置了pointer-events: none无序列表。<li>这也会影响到它的孩子。

.contact ul,
.contact-a ul {
   position: absolute;
   left: -10vw;
   margin-top: 20px;
   width: 300px;
   height: 150px;
   font-size: 1.5rem;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-end;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   opacity: 0;
   pointer-events: none;  <<<<<<<<<<<<<<<<<<<<  cause of problem
   transform: translateY(-10px);
   transition: all 0.4s ease;
}

最好把它去掉。