Mobile Navigation with :target

Question

I'm trying to create a mobile navigation with the :target pseudo-class. My problem is when i open the navigation the open button don't hide to get the close button visible.

This don't work -> #nav-menu:target #mobile-menu-open

This is my code:

HTML

<nav>
        <a href="#nav-menu" id="mobile-menu-open"></a>
        <a href="#" id="mobile-menu-close"></a>
        <ul id="nav-menu">
            <li><a href="side-a.html">Side A</a></li>
            <li><a href="side-b.html">Side B</a></li>
        </ul>
</nav>

CSS

nav {
clear: both;
text-align: left;
height: 24px;
margin: auto;
position: relative;}

#nav-menu {
display: none;}

#nav-menu li {
display: block;
text-align: left;
padding: 11px 8px;
font-weight: bold;
font-size: 14px;}

#nav-menu a:link, #nav-menu a:visited {
color:#CCC;
text-decoration: none;
transition: all 0.15s ease-in-out;}

#nav-menu a:hover, #nav-menu a:visited hover {
color:#FFF;
text-decoration: none;
transition: all 0.15s ease-in-out;}

#mobile-menu-open {
display: block;}

#mobile-menu-close {
display: none;}

#mobile-menu-open, #mobile-menu-close {
width: 24px;
height: 18px;
background: url(../bilder/mobile-menu-button.png) bottom no-repeat;
margin-top: 91px;
padding-left: 9px;
opacity: 0.75;
filter: alpha(opacity=50);
transition: all 0.3s ease-in-out;}

#mobile-menu-open:hover, #mobile-menu-close:hover {
opacity: 1.0;
filter: alpha(opacity=100);}

#nav-menu:target {
display: block;
padding-top: 11px;
background: #333;}

#nav-menu:target #mobile-menu-open {
display: none;}

#nav-menu:target #mobile-menu-close {
display: block;}

Answer 1

I got it :D

I just put the id="nav-menu" to the and changed the css show and hide navigation to #nav-menu ul ...

The problem was that after targeting the #nav-menu the button where outside the div ... hope my explanation is understandable ...

Greetz, Björn

Answer 2

OK here is an example of it

Fiddle

you need to add + to this #nav-menu:target + #mobile-menu-open