2

I'm trying to create a mobile vertical dropdown menu but I'm having an issue with showing the items of the sub-menu by using :focus for both .

I found a workaround by using :focus for sub-menu and :focus-within for its items .

This solution is working and showing the sub-menu items for Google Chrome only while other browsers like Samsung internet and UC browser are not showing any except the :focus of sub-menu.

I found another solution by using :hover for both and it's working for almost all browsers.

I have two questions:

  • Why it was working only with chrome only?
  • How do I use :focus for both the sub-menu and its items?

CSS used : 

.main-nav a {
 color:black;
 display: block;
 padding: 10px 3px 10px 3px;
    font-size: 20px;
    text-align: center;
    font-family: 'hayah';
    border-radius: 25px;
    transition: border-radius 0.2s ease-in;

}
.main-nav a:hover {
    background:#D7D7D7;
    border-radius:25px 25px 0 0; 
    -webkit-transition: border-radius 0.1s ease-in;
    -moz-transition: border-radius 0.1s ease-in;
    -o-transition: border-radius 0.1s ease-in;
    transition: border-radius 0.1s ease-in;  
    display: block;
    }
    
.main-nav-ul ul { 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    opacity: 0; 
    max-height: 0;
    overflow: hidden; 
    background-color: #D9D9D9;
    color: black;
    margin-bottom: 10px;
    margin-top: 5px;
    border-radius: 0 0 25px 25px;
    font-size: 12px;
    
    }
    
    
.main-nav-ul li:hover ul {  
    opacity: 1 !important;
    max-height: 400px !important;
    color: black;
    background-color: #E2E2E2;
    display: block;
    
    }
a stone arachnid
  • 1,272
  • 1
  • 15
  • 27
loboly_19
  • 23
  • 6

1 Answers1

1

Its hard to know what answer would work best for this situation without seeing how you implemented your HTML. :focus-within is not supported well: https://caniuse.com/#search=focus-within. Without seeing anything else I'm thinking maybe you would use JS to add and remove :hover/:focus like this answer: Can I disable a CSS :hover effect via JavaScript?. That way when you are not displaying sub-items you can get not use their hover effects.

axecopfire
  • 512
  • 5
  • 16
  • Actually i was going to add the html but it's too dirty and cannot be understood ! I added a lot of styles that may confuse who is gonna read it . – loboly_19 Oct 07 '18 at 18:22