firefox having issues with click on dropdown menu

Question

i have created a dropdown menu with CSS with clickable links and in the other just a p element. Which work wells in chrome, however Firefox won't respond to the :focus pseudo class. I don't know to fix this, i have three dropdown menu's on my website. posting code for two of them. I can't make the :fcous class into :hover because the ul disappears when you mouse the mosue away from the button to click on the dropdown links.

        <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:[email protected]" target="_blank">[email protected]</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

You can simplify the logic by simply putting the hover on the parent element of both the 'trigger' element and the 'dropdown' element. This has the advantage of maintaining the :hover styling until the mouse exits the expanded parent container.

.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>[email protected]</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>[email protected]</a></li>
           <li>+44 7463 070158</li><br>
           <li><a>Instagram</a></li>
        </ul>
     </div>