Question

我正在使用带有一点jquery的简单响应式下拉菜单。代码本身正常工作。但是当我将其添加到页面内容时，它会在移动视图中下推主要内容。在桌面视图中，下拉列表出现＆＃34; over＆＃34;主要内容应该如此。我试图给这个位置：相对;正如我在一些建议中读到的那样，但这也不起作用。问题可能是jquery代码？我也在使用一些flexbox设计，但我不认为这是问题吗？

HTML结构：

val arr = new Array[String](3)

CSS：

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

jquery：

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

Answer 1

您需要在下拉列表中使用绝对位置，以便忽略其他页面元素。

您的媒体查询会将某些元素的位置更改为静态 - 如果在添加该规则之前它在桌面上运行正常，请尝试删除该行的css

移动菜单下拉列表按下主要内容

1 个答案: