Pure CSS Mobile Menu

[SamA74]

First a note about the site. It is a WIP, the pages are not linked to or indexed by search engines as yet, with the exception of the homepage which is the only live page currently and therefore has no menu yet.
So if you go on the homepage, you will need to use back in your browser to get to the other unlinked pages with menus. And that leads onto the problem, if you use Back, it does not go to the previous page, but the previous page with the menu open. The reason being that I’m using a target selector to open (display) the menu, so you go back to pagename.php#menwrap rather than just pagename.php which would be preferred.

.table,
.cell,
#menwrap:target,
#contact {
    display: block;
}

I thought I could get around this by using a sibling selector instead of a target.

.table,
.cell,
#ham:focus + #menwrap,
#contact {
   display: block ;
}

And yes, it opens the menu, but if you then click a menu item, it loses focus and just gives you the same page again with the menu hidden. Is there a better selector to use than target or focus to make this work how I want? Yes it’s normal to use js for mob menus, but I wanted to do it with css only.
Here are links to different versions of pages. This only applies to the mobile menu, so you will have to squeeze your browser up to see it in mobile mode.
This is a page with the target selector (those with php ext). I think I could live with this, but the back thing is a bit annoying.
And this one using the sibling selector (those with htm ext). The menu opens, but the links are not clickable.

[Erik_J]

To make the sibling alternative work, I think you need to add a selector that catch the hover when the focus is moved on mouse-down to keep it avaiable for the mouse-up (that’s when the link is clicked on).

To better explain, something like:

.table,
.cell,
#ham:focus + #menwrap,
#ham:not(focus) + #menwrap:hover,
#contact {
   display: block ;
}

Couldn’t test this on your site, hope you can find the correct selector and use the trick anyway.

[SamA74]

Thanks Eric. That is an improvement, the menu items do now navigate to the selected page. But, clicking back on the browser still shows the previous page with the menu and also the close menu button no longer works.
I’m interested to know how well it works on mobile devices, as touch screens can behave a little different to the desktop. All I have at present to test on mobile is a fairly old Windows Phone (v7.8). On that the sibling selector is a failure, tapping the hamburger takes you straight to the homepage. I’m guessing because in that version the hamburger is an <a> with a blank href attribute. Using the target method works OK with it though.
Should I just stick with the target, since it does work?
I updated the css with Eric’s line. If anyone could test both versions in iOS or Android for usability that would be great, or any tips to improve the code.