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

Question

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

下面的HTML-

<div class="contact">
<button class="contactbtn">Contact</button>
<ul>
<li>
<p>For Any Enquiries→</p>
</li>
<li><a id="mail" href="mailto:[e-mail]">[e-mail]</a></li>
<li>[phone]</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:[e-mail]">[e-mail]</a></li>
<li>[phone]</li><br>
<li><a href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
</ul>
</div>

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

最好把它去掉。

Answer 2

将焦点逻辑应用于容器，不要使用按钮：

.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:[e-mail]">[e-mail]</a></li>
<li>[phone]</li><br>
<li><a href="https://www.instagram.com/samsonleung/?hl=en">Instagram</a></li>
</ul>
</div>