Question

我正在使用媒体查询创建我的投资组合网站，我为移动屏幕制作了导航选择下拉菜单。现在在iPad屏幕上我想显示一个常规菜单，所以我设置下拉菜单display：none;在我的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查看完整的网站，只需使用浏览器尺寸，您就会看到会发生什么）

Answer 1

当您的代码隐藏了下拉导航＆gt;选择，导航和任何关联的样式仍然存在。

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

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

祝你好运！

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

1 个答案: