悬停和焦点不适用于移动下拉菜单选项

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

不太确定为什么要在移动设备上使用悬停效果，但只要使用 :hover 就可以使用 :focus。