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

Question

I have already created a drop-down contact menu with 2 links within them. But it seems that when I click on the contact button and then on the desired link, it just closes the dropdown menu without redirecting the user anywhere. I read somewhere that it's because another mouse down event would trigger the :focus to be unfocused basically? How can I make this menu work? I know only a little bit of javascript.

HTML below -

<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; }

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

Answer 1

That is because you have set pointer-events: none for the unordered list. This affects it's children <li> as well.

.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;
}

Better remove that.

Answer 2

Apply your focus logic on the container instead and don't use button:

 .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; 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); } .contact-a: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); outline: none; } .contact-a ul { align-items: flex-start; left: 0; }

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