Ocultar menú al hacer click en un enlace, sólo con CSS

Tengo el siguiente código responsive, que hace que cree un menú al abrir la web con dispositivos móviles:

<header>
<nav>
<div id="menuA">
<div href="#" class="showhim"><span class="menumov">MENÚ ≣</span>
<div class="showme">
<li><a href="#inicio">Inicio</a></li>
<li><a href="#calendario">Calendario</a></li>
<li><a href="#descargas">Descargas</a></li>
<li><a href="#enlaces">Enlaces</a></li>
</div>
</div>
</div>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#calendario">Calendario</a></li>
<li><a href="#descargas">Descargas</a></li>
<li><a href="#enlaces">Enlaces</a></li>
</ul>
</nav>
</header>

Con el siguiente código CSS:

header {
  background: rgba(180,180,180,0.9);
  width: 100%;
  position: fixed; /*con fixed lo dejamos fijo*/
  z-index: 100; /*hace que el menú se muestre por encima del resto de elementos de nivel inferior*/
  height:50px; /*altura del header, tener en cuenta en el padding-top del contenido para que no se oculte texto*/
}
nav {
  float:left; /* Desplazamos el nav hacia la izquierda */
  padding-top:5px; /*espaciado superior*/
  padding-left:5px; /*espaciado a la izquierda*/
}
nav ul {
  list-style: none;
  overflow: hidden; /* Limpiamos errores de float */
}
nav ul li {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background:#FFF;
}
nav ul li a {
  display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
  padding: 10px;
  color: navy;
  text-decoration: none;
  text-align:center; /*texto alineado en cada botón*/
  min-width: 100px; /*ancho mínimo de cada botón*/
}
nav ul li a:hover {
  background: navy; /*color al pasar el mouse por encima*/
  color: white;
}
/*MENU DESPLEGABLE*/
nav{
    list-style:none;
}
nav a{
    border-radius: 5px; padding: 2px 5px 5px 5px;  
    text-decoration: none; color: navy;    /* No visitado */
    background:#FFF;
}
nav a:hover{
    text-decoration: none; color:#FFF;    /* Color paso raton */
    background: navy;
}
#menuA {   
    position: absolute; 
    margin: 2.5rem 0.5rem 0.5rem -0.4rem; 
    float: left; 
    font-weight: 900;
    font-family:verdana,arial; /*tipo de letra*/  
    width: 23%; 
    min-width: 200px; 
    line-height: 20pt; /*separación entre lineas*/ 
    z-index: 4; 
}  
.showme{                 /* Capa emergente */ 
    position: absolute; 
    margin: -1rem 0rem 0rem 1rem;
    padding: 0.5rem 1.5rem 0.5rem 0.3rem; 
    width: 12rem; 
    background: rgba(180,180,180,0.9); 
    display: none; 
    text-align: left; 
    line-height: 2.5rem;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
} 
.showhim:hover .showme{ 
    display: block; 
}
.menumov {
    position: absolute;
    text-align: center;
    margin: -3rem 0rem 0rem 0.5rem;
    padding: 0.3rem 1rem 0.3rem 1rem;
    text-decoration: none; 
    color: #FFF; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    background: navy;
}
/*MENU DESPLEGABLE*/
/* ---------------------------------------------------------- */
@media screen and (min-width: 1000px){
    #menuA{
        display:none;
    }
}
@media screen and (max-width: 1000px){
    #menuA{
    display:none;
    }
}
@media screen and (max-width: 750px){
    nav ul {
        display:none;
    }
    #menuA{
        display:block;
    }
}
@media screen and (max-width: 550px){
    #menuA{
        display:block;
    }
}

Lo que quiero conseguir es que dicho menú desplegable desaparezca al hacer click sobre uno de los enlaces que están dentro. Que haga el mismo efecto que si hago click fuera del menú o el ratón se va de encima de ésts.