Наведите курсор мыши и не фокусироваться на опциях выпадающего меню

Question

На мобильном устройстве у меня есть выпадающее меню с некоторыми опциями. Мне бы хотелось, чтобы эти ссылки меняли цвет на серый, когда на нем "зависает" большой палец на телефоне. Мне не удалось, хотя я попробовал несколько вариантов, как вы можете видеть в коде. Это оно:

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

и это 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;
}

Answer 1

Не совсем уверен, почему вы хотите эффект наведения на мобильном устройстве, но с помощью :focus всякий раз, когда вы используете :hover должен сделать свое дело.