我希望我的移动 View 子菜单像this 一样工作但相反,如果您进入移动 View 并单击服务选项卡,它不会打开,如 this .如果删除位置:静态;在@media only screen and (max-width: 798px)
.nav-dropdown {
position: static; */
}
它会显示子菜单“网页设计”,但它只是位于菜单的顶部,而不是像在我尝试使用的导航中那样将其向下推并适配。这是我的代码:
<ul class="nav-list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/#about">About</a>
</li>
<li>
<a href="#!">Services</a>
<ul class="nav-dropdown">
<li>
<a href="/web-design">Web Design</a>
</li>
<!--<li>-->
<!-- <a href="#!">Web Development</a>-->
<!--</li>-->
<!--<li>-->
<!-- <a href="#!">Graphic Design</a>-->
<!--</li>-->
</ul>
CSS:
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 50px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
最佳答案
nav ul li {
height: 50px;
}
如果您在移动媒体查询中将此更改为,则为每个 li 提供 50 像素的硬高度:
nav ul li {
height: inherit;
}
它应该允许 li 在下拉列表扩展时向下移动并解决问题。希望这会有所帮助。
关于html - 为什么移动设备中的子菜单在菜单顶部打开而不是将菜单向下推?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54165431/