我在CSS如下(在去错误模式显示的复选框,但会被隐藏在最后):CSS兄弟选择不触发
<style type="text/css">
* { margin: 0; padding: 0; font-family: sans-serif; }
#nav-trigger { display: none; }
#nav-icon { display: none; }
#navigation { display: block; }
nav { width: 100%; text-align: center; }
nav ul { float: right; line-height: 50px; }
nav li { display: inline; list-style-type: none; }
nav a { text-decoration: none; padding: 10px; color: #999; }
nav a:hover { color: #C00; }
@media screen and (max-width: 480px) {
nav ul { display: block; float: none; margin-top: 50px; background-color: #C00; }
nav li { display: block; }
nav a { display: block; padding: 3px; border-bottom: 1px dotted #CCC; }
nav a:hover { color: #FFF;}
#nav-trigger { display: block; }
#navigation { display: none; }
#nav-icon { font-size:32px;display:block;position:relative;width:40px;height:40px;text-align:center;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;margin-left:auto;margin-right:8px; }
#nav-icon::before { content:"";position:absolute;top:.25em;left:4px;width:1em;height:.125em;color:#fff;border-top:.375em double #ddd;border-bottom:.125em solid #ddd;box-sizing:content-box }
#nav-trigger:checked ~ #navigation { display: block; }
}
</style>
我的HTML:
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" id="nav-icon"></label>
<nav id="navigation">
<ul>
<li><a href="#">Link 1</a>
<li><a href="#">Link 2</a>
<li><a href="#">Link 3</a>
<li><a href="#">Link 4</a>
</ul>
</nav>
我导航在调整窗口大小时有反应,并且在小于480px时隐藏导航菜单,并显示汉堡包图标,但当单击图标(或相应的复选框)时,我的菜单不会出现。我与我的CSS兄弟选择器(我的CSS的最后一行)有一些关系问题。
试图远离JavaScript/JQuery。
需要一些帮助!
谢谢!
哪里的输入框在你的html? – 2014-11-23 09:02:35
它似乎工作:http://jsfiddle.net/9c7afqhg/ - 当你检查复选框的导航链接显示 - 你能解释什么问题是? – Danield 2014-11-23 09:05:23
可能在旧版浏览器中测试? – 2014-11-23 09:11:20