0

我正在使用媒体查询创建我的投资组合网站，并为移动屏幕制作了一个导航选择下拉菜单。现在在 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上查看完整的网站， 只需使用浏览器大小，您就会看到会发生什么）

4

1 回答 1

1

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

向下拉导航添加一个类并根据需要隐藏它怎么样？ 

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

祝你好运！

于 2013-06-03T12:11:47.650 回答