firefox 在单击下拉菜单时遇到问题

Question

我创建了一个带有 CSS 的下拉菜单，带有可点击的链接，而另一个只有一个 p 元素。这在 chrome 中运行良好，但是 Firefox 不会响应 :focus 伪 class。我不知道如何解决这个问题，我的网站上有三个下拉菜单。发布其中两个的代码。我无法将 :fcous class 变成 :hover，因为当您将鼠标从按钮上移开以单击下拉链接时，ul 会消失。

        <div class="contact-a">
        <button class="contactbtn">Contact</button>
        <ul style="color: white;">
           <li>
              <p>For Any Enquiries→</p>
           </li>
           <li><a style="color: white;" href="mailto:hello@shekleung.com" target="_blank">hello@shekleung.com</a></li>
           <li>+44 7463 070158</li><br>
           <li><a style="color: white;" href="https://www.instagram.com/samsonleung/?hl=en" target="_blank">Instagram</a></li>
        </ul>
     </div>
     <div class="stockist">
        <button class="stockistbtn">Stockist</button>
        <ul class="stockist-content">
           <li>
              <p>COMING SOON</p>
           </li>

CSS

.contact {
   position: relative;
   top: 5vh;
   right: 4vw;
   font-family: Helvetica, sans-serif;
   height: 20vh;
   letter-spacing: 3px;

}



.contactbtn {
   color: white;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: bold;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;
   position: fixed;

   
}

.contactbtn:hover {
   opacity: 0.6;
}

.contact ul,
.contact-a ul {
   position: absolute;
   left: -10vw;
   margin-top: 4vh;
   color: black;
   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;
   -webkit-transform: translateY(-10px);
   -webkit-transition: all 0.4s ease;
   -moz-transform: translateY(-10px);
   -moz-transition: all 0.4s ease;

}

.contact a,
.contact-a a {
   text-decoration: none;
}

.contact a:hover {

   background-color: var(--grCol3);
}

.contact-a a:hover {

   background-color: black;
}

.contactbtn:focus+ul {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0);
   -moz-transform: translateY(0);
   -webkit-transform: translateY(0);
   outline: none;
}

/* about page contact */

.contact-a {
   position: absolute;
   top: 5vh;
   left: 5vw;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;
   color: white;
}

.contact-a ul {
   align-items: flex-start;
   left: 0;
}

    .stockist {
   position: relative;
   display: inline;
   top: -85vh;
   right: -20vw;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;

}

.stockistbtn {
   color: white;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: bold;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;

}

.stockistbtn:hover {
   opacity: 0.6;
}

.stockist ul {
   position: absolute;
   left: -9vw;
   margin-top: -5vh;
   width: 300px;
   height: 150px;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-10px);
   -moz-transform: translateY(-10px);
   -webkit-transform: translateY(-10px);
   transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -webkit-transition: all 0.4s ease;
}

.stockist p {
   color: var(--grCol3);
   text-decoration: none;
}

.stockist p:hover {
   background-color: black;
}

.stockistbtn:focus+ul {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0);
   -moz-transform: translateY(0);
   -webkit-transform: translateY(0);
   outline: none;
}

Answer 1

您可以通过简单地将鼠标悬停在 'trigger' 元素和 'dropdown' 元素的父元素上来简化逻辑。这具有在鼠标退出展开的父容器之前保持 :hover 样式的优点。

.menu {
  display:none;
}

.menu-container:hover .menu {
  display:block;
 }

 <div class="contact-a menu-container">
        <button class="contactbtn">Contact</button>
        <ul class="menu">
           <li>
              <p>For Any Enquiries→</p>
           </li>
           <li><a>hello@shekleung.com</a></li>
           <li>+44 7463 070158</li><br>
           <li><a>Instagram</a></li>
        </ul>
     </div>
 <div class="contact-b menu-container">
        <button class="contactbtn">Contact</button>
         <ul class="menu">
           <li>
              <p>For Any Enquiries→</p>
           </li>
           <li><a>hello@shekleung.com</a></li>
           <li>+44 7463 070158</li><br>
           <li><a>Instagram</a></li>
        </ul>
     </div>

firefox 在单击下拉菜单时遇到问题

firefox having issues with click on dropdown menu

css

firefox

dropdown