我正在使用媒体查询创建我的投资组合网站,并为移动屏幕制作了一个导航选择下拉菜单。现在在 iPad 屏幕上我想显示一个常规菜单,所以我设置了下拉菜单显示:无;在我的 CSS 中。
现在我注意到虽然它没有显示它仍然是可选的,并且导致我的常规菜单无法正常运行,因为它就在它的正下方。我放置在菜单下的 div 也会对下拉菜单做出反应,就像它仍然在那里一样。
为什么它是可选的?希望有人可以帮助我!
这是最重要的代码(我认为)
HTML
<div id="menu">
<nav>
<ul>
<li><a href="camera.html">camera / editing</a></li>
<li><a href="interface.html">interface</a></li>
<li><a href="illustration.html">illustration</a></li>
<li><a href="drawing.html">drawing</a></li>
</ul>
</nav>
</div>
<nav>
<select>
<option selected>Find my work here!</option>
<option value="camera.html">Camera / Editing</option>
<option value="interface.html">Interface</option>
<option value="illustration.html">Illustration</option>
<option value="drawing.html">Drawing</option>
</select>
</nav>
<div id="bio"><a href="#">About Me</a>
<p>Lorem ipsum dolor sit amet</p></div>
</div>
和 CSS
手机查询
nav{
top: 0;
width: 100%;
padding-top: 1em;
padding-bottom: .7em;
height: 80px;
background: url("afb/top fade.png") top center no-repeat;
}
nav select{
position: relative;
width: 100%;
font-size: 1em;
opacity: 1;
}
iPad查询
#menu{
padding-left: 3em;
padding-right: 3em;
}
nav{
background-image: none;
position: static;
}
nav select{
display: none;
}
nav ul:first-of-type{
position: static;
width: 100%;
display: block;
list-style: none;
font-size: 1.4em;
}
(人们可以在http://nickzijlstra.com/resp上查看完整的网站, 只需使用浏览器大小,您就会看到会发生什么)