Css 移动导航：目标

我正在尝试使用：target伪类创建移动导航。我的问题是，当我打开导航时，打开按钮不会隐藏以使关闭按钮可见

这不起作用->#导航菜单：目标#移动菜单打开

这是我的代码：

HTML

---

好的，这里有一个例子

您需要将

+

添加到此

#导航菜单：目标+#移动菜单打开

我知道了：D

我只是将id=“nav menu”放在菜单中，并将css显示和隐藏导航更改为#nav menu ul

问题是，在定位导航菜单后，div外的按钮。。。希望我的解释可以理解

---

格里茨，比约恩

打开按钮和关闭按钮#移动菜单打开，#移动菜单关闭是相同的CSSY您是对的，但功能不同。。。设计应该是一样的…哦，好的。。。但在我的网站上它不起作用。。。也许问题出在其他地方。。。我使用Dreamweaver CS6和自己的手写css和html5的流体网格布局…你可以把你的东西放在小提琴上，我们可以修改它。。。这里是小提琴：我只采取了标题html和移动css的标题部分。。。

<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>

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;}