Question

我正在尝试在iPhone媒体查询上安装修复菜单。只要我点击页面顶部的菜单就可以正常工作，但只要我向下滚动页面然后点击菜单，它就不能正确折叠，直到我向后滚动页面顶部再次。除了媒体查询480px及以下版本外，它在所有其他媒体查询上正常工作。这是sample page。

-Sohail

Answer 1

您将要在.menu-button

上设置z-index

.menu-button {
position: fixed;
width: 100%;
top: 0;
left: 0;
display: block;
padding: 1em;
background: #ff8400;
color: #222222;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
z-index: 99; <-- HERE
}

此外，您还需要更改保证金，将第一个菜单项“博客”移到新的顶部菜单下面

<强>更新
是的，要获得保证金，请将.plexnav.flexnav-show的保证金增加52px：

.flexnav.flexnav-show {
max-height: 2000px;
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
margin-top: 52px; <-- HERE
}

要让文章向下移动，请在第一页中添加填充。将其添加到最低媒体查询：

p:first-child {
   margin-top: 50px;
}

小设备上的css下拉菜单问题

1 个答案: