我正在使用带有一点 jquery 的简单响应式下拉菜单。代码本身工作正常。但是当我将它添加到页面内容时，它会在移动 View 中下推主要内容。在桌面 View 中，下拉列表应显示在主要内容的“上方”。 我试着给 ul li 一个职位:亲戚；正如我在一些建议中读到的那样，但这也不起作用。问题可能是 jquery 代码吗？ 我也在使用一些 flexbox 设计，但我不认为这是问题所在？
HTML 结构:
<body>
<div class="wrapper">
<header class="full-width flex-container">
<div class="logo-wrap">
<img src="img/logo.png" alt="" id="logo">
</div>
<div class="nav-wrap">
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li><a href="#"><b>Item1</b></a></li>
<li><a href="#"><b>Item2</b></a></li>
<li><a href="#"><b>Item3</b></a>
<ul>
<li><a href="#">Sub-Item1</a></li>
<li><a href="#">Sub-Item2</a></li>
<li><a href="#" class="active">Sub-Item3</a></li>
<li><a href="#">Sub-Item4</a></li>
<li><a href="#">Sub-Item5</a></li>
</ul>
</li>
<li><a href="#"><b>Item4</b></a></li>
<li><a href="#"><b>Item5</b></a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="wrap">
<article>
<h1>Bilanz</h1>
<hr id="top-hr">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...............</p>
</article>
</div>
</main>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html,
body {
overflow-x: hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #e6e6e6;
}
.wrapper {
max-width: 90%;
margin: 0 auto;
border: 1px solid red;
}
.full-width {
position: relative;
/* child absolute */
margin: 0 -9999rem;
/* add back section padding value */
padding: .25rem 9999rem;
}
.flex-container {
display: flex;
justify-content: space-between;
}
.nav-wrap {
align-self: flex-end;
}
.main-wrap {
display: flex;
}
header {
background-color: #ffffff;
}
#logo {
max-width: 100%;
}
main {
background-color: #ffffff;
}
article {
margin-top: 3em;
padding: 2em;
}
aside {
border: 1px solid grey;
padding: 2em;
margin-bottom: 3em;
}
h1 {
color: #97C227;
}
h1,
h2,
p {
padding: 0.8em 0;
}
#top-hr {
height: 4px;
color: #d9d9d9;
background: #d9d9d9;
border-style: none;
}
/*###############-------navigation-------############*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
background: white;
}
ul li {
display: inline-block;
position: relative;
}
ul li a {
display: block;
color: grey;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
}
ul li a:hover {
color: #97C227;
}
ul li a.active {
color: #97C227;
text-decoration: underline;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background-color: lightblue;
}
ul li:hover ul {
display: block;
}
nav div {
background-color: pink;
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
/*########### media queries ##############*/
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
jquery:
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if ($(window).width() > 768) {
$("ul").removeAttr('style')
}
})
</script>
最佳答案
您需要在下拉列表中使用绝对位置，以使其忽略其他页面元素。
您的媒体查询将某些元素的位置更改为静态 - 如果在您添加该规则之前它在桌面上工作正常，那么请尝试删除该行 css
关于jquery - 移动菜单下拉菜单下推主要内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50602729/