Question

菜单栏的CSS样式

* {
    margin: 0;
    padding: 0;
}
body {
    background: white;
    font-family: 'Helvetica Neue', Helvetica;
    font-weight: 400;
    font-size: 1.05em;
    line-height: 1.6rem;
    color: white;
    font-size: 1.2em;
}
header {
    position: fixed;
    background: #d777ea; /*light purple*/
    width: 100%;
    display: block;
}
header > nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
    list-style: none;
    flex-wrap: wrap;
}
header > nav > ul > li {
    margin: 0;
    flex: 0 1 auto;
    position: relative;
    transition: 0.2s;
    cursor: pointer;
}
header > nav > ul > li:hover {
    background: #aa64e0; /*dark purple*/
}
header > nav > ul > li > ul {
    /* dropdown */
    position: absolute;
    background: #76a1e8; /*light blue*/
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li:hover > ul {
    /* dropdown */

    display: block;
    width: 220px;

}
header > nav > ul > li > a {
    color: white;
    display: flex;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 1rem 1.5rem;
    letter-spacing: 1px;

}
header > nav > ul > li > ul > li {
    display: block;
}
header > nav > ul > li > ul > li > a {
    text-decoration: none;
    color: white;
    display: flex;
    letter-spacing: 1px;
    cursor: pointer;
    padding: .25rem 1.5rem;
}
header > nav > ul > li > ul > li:hover {
    background: blue;
}
header > nav > ul > li > a > i {
    margin-left: 5px;
}
input {
    padding: .25rem;
    width: 100px;
}
input:invalid {
    border: 2px solid red;
}
header > nav > ul > li > ul > li > input:invalid + button {
    background: red;
    cursor: not-allowed;

}
button {
    padding: .25rem;
}

HTML标头和图片

<header>
    <nav>
      <ul>
        <li><a href="#">Teams<i class="fas fa-caret-down"></i></a>
            <ul>
                <li><a class="preset-id" data-schoolid=13318>Huron</a> </li>
                <li><a class="preset-id" data-schoolid=99999>Pioneer</a></li>
                <li>
                    <input type="number" min="1" max="100000" class="custom-id-value" placeholder="School ID #" required>
                    <button class="custom-id"> Go </button>
                </a>
                </li>
            </ul>
        </li>
        <li><a class="show-calendar">Calendar</a></li>

        <li><a class="show-athletes">Athletes</a></li>
    </ul>
    </nav>
</header>
<main>
    <image src="https://www.w3schools.com/w3css/img_lights.jpg"></image>
</main>

出现时，

内容在标题栏顶部。有什么办法可以避免这种情况？并在下面显示内容吗？激活下拉菜单后，我不想移动其下方的内容。

JsFiddle：https://jsfiddle.net/g870xy3d/36/

Answer 1

您只需要在main标签中添加页眉高度和页眉高度。还要在标题中添加top：0：

header{
  top:0;
  position: fixed;
  background: #d777ea; /*light purple*/
  width: 100%;
  display: block;
}

main{
   margin-top: 57px;
}

内容与flexbox标头重叠-如何避免

1 个答案: