Links does not work in the menu

Question

I’m having a problem on my accordion menu I did it with HTML and CSS pure however I will have to link some PDF'f to can open in a new guide co target="_blank" however I create the links normally and my menu simply closes when I click on my link and does not open the PDF do not know why it happens follow my code:

ul li {
  list-style-type: none;
}
a {
  text-decoration: none;
}
*:focus {
  outline: none
}
ul {
  padding: 0;
  margin: 0;
}
.menu-sanfona {
  margin-top: 10%;
  border-bottom: 5px solid #8b8b8b;
  background: #222;
}
/*.menu-sanfona span:hover{
    background: rgba(255, 255, 255, 0.06);
}*/

.menu-sanfona span {
  padding: 1.2em;
  display: block;
  text-align: center;
  color: #fff;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  cursor: pointer;
}
.menu-sanfona > li {
  border-bottom: 1px solid #8b8b8b;
}
.menu-sanfona li ul {
  background: #fff;
  border-top: 1px solid #ccc;
  display: none;
}
/* a mágica acontece aqui */

.menu-sanfona li:focus ul {
  display: block;
}
.links-melhoria li a {
  color: #333;
}
.links-melhoria li span {
  color: #333;
  line-height: 35px;
  margin-top: -2%;
}
.links-melhoria li span:hover {
  color: #000;
}
.img-melhoria {
  float: left;
  width: 30%;
  margin-left: 10%;
}

<ul class="menu-sanfona">
  <li tabindex="0"> <span>Kaizen e 5S</span>
    <ul class="links-melhoria">
      <img src="http://vignette4.wikia.nocookie.net/blackrockshooter/images/9/9f/Black_Rock_Shooter_THE_GAME_Logo.png/revision/latest?cb=20120304213705" class="img-melhoria" />
      <li><span><a href="resources/manuais/kaizen/Folder.pdf" target="_blank" >Folder</a></span>
      </li>
      <li><span><a href="resources/manuais/kaizen/TreinamentoMelhoriaContinua.pdf" target="_blank">Treinamento Melhoria Contínua</a></span>
      </li>
      <li><span><a href="" >Teatro Sr. NAPA(Mehoria Contínua)</a></span>
      </li>
      <li><span><a href="resources/manuais/kaizen/Fotos_treinamentos.pdf" target="_blank">Fotos Treinamento</a></span>
      </li>

    </ul>
  </li>
  <li tabindex="1"> <span>Redução de custo</span>
    <ul class="links-melhoria">
      <li><span>Item 2.1</span>
      </li>
      <li><span>Item 2.2</span>
      </li>
    </ul>
  </li>
  <li tabindex="2"> <span>Campanha Sabesp</span>
    <ul class="links-melhoria">
      <img src="http://vignette4.wikia.nocookie.net/blackrockshooter/images/9/9f/Black_Rock_Shooter_THE_GAME_Logo.png/revision/latest?cb=20120304213705" class="img-melhoria" />
      <li><span>Gibi</span>
      </li>
      <li><span>Pesquisa de Vazamentos</span>
      </li>
      <li><span>Vídeo - Seca</span>
      </li>
      <li><span>Vídeo - Tratamento de Água</span>
      </li>
      <li><span>Vídeo - A água é preciosa para ser desperdiçada</span>
      </li>
    </ul>
  </li>
  <li><span>Retrospectiva - 2014</span>
  </li>
</ul>

NOTE: I am using JSF my page is in XHTML and my PDF files are in my project folder they are not from an external link.

Answer 1

It’s because there’s a li:focus, I believe because of the click function. Switch to li:hover. But if you still want to CLICK, import a jQuery for your code and make the code below.

$(document).ready(function(){

    $('.menu-sanfona li').on('click', function(){
        $(this).children('ul').slideToggle();
    });

});

And delete this routine from the CSS:

.menu-sanfona li:focus ul {
  display: block;
}