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

祝你好運！