Question

感谢您抽出时间阅读此问题！所以一分钟一切都很好，然后我做了太多更改以致无法通过刷新我的代码，然后发生了：

没有颜色的下拉菜单：

标题中的任何颜色都不会转移到下拉菜单中。我该如何解决？这是我的代码：

<header id="sticky-header">
        <div class="nav">
            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle" />
            <nav>
                <ul>
                    <li><a href="#top">Home</a></li>
                    <li><a href="#bio">Bio</a></li>
                    <li><a href="#music">Music</a></li>
                    <li><a href="#shows">Shows</a></li>
                    <li><a href="#media">Media</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

header {
height: 67px;
background-color: #2b2b2b;
width: 100%;
position: fixed;
text-align: center;
}

nav ul {
margin-top: 13px;
padding: 0;
list-style: none;
}

nav li {
display: inline-block;
margin: 0.8em;
}

nav a {
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
font-size: 0.95em;
padding: 0.5em;
color: #FFF;
}

nav a:hover,
nav a:focus {
color: #048575;
font-size: 1em;
}

label {
font-size: 2rem;
color: #FFF;
padding: 0.5em;
display: none;
width: 1em;
float: center;
}

#toggle {
display: none;
}

@media only screen and (max-width:650px) {
header {
    padding-top: 0em;
    padding-bottom: 0em;
    background-color: #2b2b2b;
}

label {
    display: block;
    cursor: pointer;
}

nav li {
    display: block;
    display: none;
}

nav a {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid black;
}

#toggle:checked + nav li {
    display: block;
}
}

抱歉，格式化有点奇怪，复制和粘贴效果不佳。感谢您的阅读，如果您可以提供帮助，请这样做！（也欢迎您提供其他反馈）。

Answer 1

我认为您想将应用于标题的黑色背景反映在下拉菜单中吗？在这种情况下，您需要将背景应用于媒体查询中的nav。请注意，您还需要设置margin-top，以使导航栏稍微抬起，以便与标头“齐平”：

nav {
  background-color: #2b2b2b;
  margin-top: -20px;
}

在以下内容中可以看到：

header {
  height: 67px;
  background-color: #2b2b2b;
  width: 100%;
  position: fixed;
  text-align: center;
}

nav ul {
  margin-top: 13px;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 0.8em;
}

nav a {
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.95em;
  padding: 0.5em;
  color: #FFF;
}

nav a:hover,
nav a:focus {
  color: #048575;
  font-size: 1em;
}

label {
  font-size: 2rem;
  color: #FFF;
  padding: 0.5em;
  display: none;
  width: 1em;
  float: center;
}

#toggle {
  display: none;
}

@media only screen and (max-width:650px) {
  header {
    padding-top: 0em;
    padding-bottom: 0em;
    background-color: #2b2b2b;
  }
  label {
    display: block;
    cursor: pointer;
  }
  nav {
    background-color: #2b2b2b;
    margin-top: -20px;
  }
  nav li {
    display: block;
    display: none;
  }
  nav a {
    display: block;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid black;
  }
  #toggle:checked+nav li {
    display: block;
  }
}

<header id="sticky-header">
  <div class="nav">
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <nav>
      <ul>
        <li><a href="#top">Home</a></li>
        <li><a href="#bio">Bio</a></li>
        <li><a href="#music">Music</a></li>
        <li><a href="#shows">Shows</a></li>
        <li><a href="#media">Media</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

汉堡下拉菜单颜色无法传输

1 个答案: