display：none仍然影响元素的放置

Question

我使用媒体查询创建我的作品集网站响应，我为移动屏幕制作了导航选择下拉菜单。现在在iPad屏幕上，我想显示一个常规菜单，所以我设置下拉菜单显示：无;在我的CSS。

现在我注意到，尽管它没有显示它仍然可以选择，并导致我的常规菜单不能正常工作，因为它直接在它下面。此外，我的菜单下的菜单也会响应下拉菜单，就像它仍在那里一样。

为什么它是可选的，所有？希望有人能帮助我！

下面是主要是重要的代码（我认为）

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查看完整的网站只与浏览器尺寸播放，你会看看会发生什么）

Answer 1

当你的代码是隐藏下拉导航>选择，资产净值和任何associatied造型仍然是当下。

如何在下拉式导航栏中添加一个类并根据需要隐藏它？

<nav class="dropdown"> 
<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> 

而对于iPad的媒体查询

.dropdown{ 
display:none; 
} 

祝你好运！