Hover and focus not working on mobile dropdown menu options

Question

On mobile here, I have a dropdown menu that comes down with some options in it. I would like these links to change color to grey when one "hovers" on it with the thumb on the phone. I haven't managed though I have tried several options as you can see in the code. This is it:

<div class="total">
  <ul class="nav navbar-nav" >
    <li>
      <div class="id"><a style="width:100px" data-toggle="dropdown" href="#"><img src="grey.png" alt="Friends in class" class="barimage"> <span ></span></a>
        <ul class="dropdown-menu">
         <div class="dropdown">
          <li><p><b><a href="#" class="menunav">Search your friends</a></b>    </p>
          </li>
          <li><p class="menupar"><b><a href="#" class="menunav">My Friends </a></b></p>
          </li>
          <li><p class="menupar"><b><a href="#" class="menunav">My account</a></b></p>
          </li>
          <li><p class="menupar"><b><a href="#" class="menunav">Logout</a></b></p>
          </li>
         </div> 
        </ul>
      </div>
    </li>

and this is the CSS:

.dropdown {
margin-top:-3px;
width: 200px;
height:220px;
background-color: rgba(36, 96, 70, 1);
font-size:20px;
line-height:50px;

border-radius: 3px;

}
.menunav {
width: 200px;
height:80px;
color:green;
font-size:20px;
line-height:50px;
border:solid black;
border-radius:1px; 
} 

a:link {color:white;}
a:visited {color:white}
a:hover.menunav {background-color:grey;}
a:active.menunav {background-color:grey;}
a:focus.menunav {background-color:grey;} 
a.menunav {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}

score 0 · Answer 1 · edited Nov 28 '15 at 01:31

0

Not really sure why you'd want a hover effect on a mobile device, but using :focus whenever you use :hover should do the trick.

edited Nov 28 '15 at 01:31

NoobEditor

15,563
19
81
112

answered Nov 28 '15 at 01:30

Jameyson MacDonald

94
1
11

I'm using focus already, as you can see, but it won't work. I want the options to be highlighted when one clicks on them! – Fidelio Nov 28 '15 at 02:16
2

You might want to try: ... – Jameyson MacDonald Nov 28 '15 at 02:23
You also might want to consider this JS library: https://github.com/ftlabs/fastclick – Jameyson MacDonald Nov 28 '15 at 02:24
thanks @jameyson MacDonald , that worked! But another problem started: now the links turn blue and underlined when you hover on them. This is quite strange actually, I also have some other javascript code separately whose links turn blue when run. Would you know how to solve the problem? Thank you!! – Fidelio Nov 28 '15 at 02:32
Which did you use, the "ontouchstart" or the library? – Jameyson MacDonald Nov 28 '15 at 02:38
I used on touchstart! – Fidelio Nov 28 '15 at 02:39
I'm not 100% sure, but try adding: a { -webkit-tap-highlight-color: rgba(your color); } – Jameyson MacDonald Nov 28 '15 at 02:45
Adding "!important" after "text-decoration: none !important;" should work. – Jameyson MacDonald Nov 28 '15 at 02:51
I had to add important in a couple of places, quite weird actually! But now it's great, many thanks, really appreciated your help – Fidelio Nov 28 '15 at 03:30

Hover and focus not working on mobile dropdown menu options

1 Answers1