单击功能：触摸设备上的悬停状态

Question

我正在构建一个简单的菜单，在悬停时具有下拉功能。谈到移动设备时，我遇到了一个问题。我试图删除：悬停效果并在CSS中添加点击功能。我删除了：悬停并添加了：焦点和：激活，但它似乎没有做到这一点。无论我添加到悬停效果中它仍然可以作为悬停而不是具有点击能力。

 <header>
  <a class="mobile-menu proxima-bold" href="#"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a>
  <nav class="proxima-bold">
  <a class="mobile-menu proxima-bold" href="#"><i class="fa fa-bars" aria-hidden="true"></i> Menu</a>
  <ul id="menu-main drop" class="menu">
       <li><a href="<?php echo siteURL();?>/about" class="toggle" title="About Us">About Us</a>
        <ul>
            <li><a href="<?php echo siteURL();?>/personal_banking" title="Personal Banking">Personal Banking</a></li>
            <li><a href="<?php echo siteURL();?>/corporate_banking" title="Corporate Banking">Corporate Banking</a></li>
            <li><a href="<?php echo siteURL();?>/all_other" title="All Other">All Other</a></li>
        </ul>
    </li>
    <li><a href="<?php echo siteURL();?>/products" title="Our Products">Products</a>
        <ul>
            <li><a href="<?php echo siteURL();?>/personal_banking" title="Personal Banking">Personal Banking</a></li>
            <li><a href="<?php echo siteURL();?>/corporate_banking" title="Corporate Banking">Corporate Banking</a></li>
            <li><a href="<?php echo siteURL();?>/all_other" title="All Other">All Other</a></li>
        </ul>
    </li>
    <li><a href="<?php echo siteURL();?>/resources" title="Resources">Resources</a></li>
    <li><a href="<?php echo siteURL();?>/leadership" title="Leadership">Leadership</a></li>
    <li><a href="<?php echo siteURL();?>/contact_us" title="Contact Us">Contact Us</a></li>
 </ul>  
 </nav>
 </header>

我的CSS

  header nav li a {display: block}
  header nav ul li ul {padding-top: 1em;}
  header nav ul li ul li {display: block}
  header nav ul li ul li a {padding: .5em 0 .5em 0}
  header nav ul li ul li:last-child {padding: 0px 0px;border: none;margin-right: 0}
  header nav ul li ul li:last-child a:after {content: "";width: 0px;height: 0;background: none;display: block;vertical-align: left;margin-left: 0}
  header nav ul ul {display: none;position: absolute}
  nav ul li:hover>ul {display: inherit}
  nav ul ul li {float: none;display: list-item;position: relative}
  nav ul ul ul li {position: relative}
  li>a:after {content: ' \25bc';font-size: .6em;padding-left: .5em}
  li>a:only-child:after {content: ''}
 @media (max-width: 960px){
      header.active nav{right:0;}
      header nav .mobile-menu {top: 40px;}
      header nav li {display: block; margin-right: 0; margin-bottom: 25px;}
      header nav ul li ul { padding-top: 2em;}
      header nav ul li ul li { display: block}
      header nav ul li ul li a { padding: 0em 0 0em 0; line-height: .1em;}

      nav ul ul li:focus > ul,
      nav ul li:focus > ul { display: block; position:relative}
 }

JS FIDDLE https://jsfiddle.net/szojdenv/3/