CSS navigation using "input:checked" doesn't fire inner link href when using secondary labels to uncheck original input

Question

I have created a nice CSS menu for the app I'm working on, which is activated by using a checkbox and sibling selector.

Problem: clicking on a link doesn't close the menu (it's a single page app, so no page reloads)

Attempted solution: tried to create labels inside or around the menu links, with a "for" attribute pointing to the original menu button. This closes the menu on each link click (unchecks the checkbox), but then the link open doesn't fire.

<label for="btn">menu btn</label>
<input id="btn" type="checkbox"/>
<ul>
    <li>
        <a href="http://google.com/" target="_blank">
            <label for="btn">link 1</label>
        </a>
    </li>
    <li>
        <a href="http://google.com/" target="_blank">
            <label for="btn">link 2</label>
        </a> 
    </li>
</ul>

<style>
/* important styles */
ul {
    opacity: 0;
}
#btn:checked + ul {
    opacity: 1;
}
</style>

Fiddle here:

http://jsfiddle.net/gebi/4nzLa9yh/

Any ideas?

Answer 1

I hope this will help, if you open link in same tab.

<a href="#ul" class="menu_btn"> Menu Btn</a>
<ul id="ul">
  <li>
    <a href="#">link 1</a>
  </li>
  <li>
    <a href="#">link 2</a>
  </li>
</ul>

<style>

ul {
    display: none;
}
#ul:target {
    display: block;
}


</style>