Question

我曾经使用过一个CSS样式来设置.navbar类。在这里：

.navbar {
    background-color: #3f3838;
    overflow: auto;
    position: -webkit-sticky;
    position: sticky; /* Breaks dropdown for some reason */
    top: 0;
}

由于某些原因，每次position: sticky;处于活动状态时，.navbar内部的下拉菜单都会中断。可以通过删除overflow: auto;来解决此问题，但这样做会从.navbar中删除背景。

提琴：https://jsfiddle.net/sdmfoy8t/

Answer 1

在flex中将显示设置为.navbar可以防止BG颜色消失。您的浮动列表项（div.dropdown）导致导航栏的高度崩溃。您也可以尝试使用clearfix。

body {
  margin: 0;
  font-family: 'Lusitana', serif;
}

h1,
h2,
h3 {
  font-family: 'Raleway', sans-serif;
}

article,
h1 {
  margin-left: 20px;
}

.header-img {
  width: 100%;
}

.navbar {
  background-color: #3f3838;
  /* overflow: auto; */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: flex; /* `flex` instead of `block` */
}

.navbar a {
  /* float: left; */ /* Not necessary with flexbox*/
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  /* float: left; */ /* Not necessary with flexbox*/
  overflow: hidden;
}

.dropdown .dropbutton {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbutton {
  background-color: rgb(255, 217, 49);
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: rgb(255, 217, 49);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.activemenuitem {
  background-color: rgb(255, 196, 0);
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My Blog Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
    <link href="https://fonts.googleapis.com/css?family=Lusitana|Raleway:500" rel="stylesheet">
    <script src="main.js"></script>
  </head>

  <body>
    <img src="https://via.placeholder.com/2000x400/102a4b/FFFFFF?text=Header" class="header-img">
    <div class="navbar">
      <div class="dropdown activemenuitem">
        <button class="dropbutton">Blogs</button>
        <div class="dropdown-content">
          <a href="index.html">Blog Article 1</a>
          <a href="index.html#article2">Blog Article 2</a>
          <a href="index.html#article3">Blog Article 3</a>
        </div>
      </div>
      <a href="about.html">About</a>
    </div>
    <div class="contentbody">
      <article id="article1">
        <h2>Article 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis convallis velit id ultrices. Vestibulum eget urna non urna faucibus ornare. Mauris posuere felis quam, tincidunt lacinia orci egestas tincidunt. Nulla id porta arcu. Aliquam
          volutpat nec nunc ac tempus. Donec neque tortor, feugiat eu erat sed, semper tempus ipsum. Maecenas venenatis mi eu tristique semper. In sem mi, cursus ac nisl a, malesuada commodo justo. Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Repellat distinctio mollitia cupiditate vel est laudantium ipsam ab modi incidunt voluptate aliquam accusantium, nulla nobis cum voluptatibus! Tenetur obcaecati maiores deserunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel
          autem reiciendis est nam facilis, odit dignissimos hic facere dolore odio debitis architecto dolorem tenetur cum quisquam excepturi labore minus provident.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed harum iusto saepe quibusdam enim aliquam, culpa quis delectus similique eius mollitia? Excepturi vero doloremque corrupti architecto similique molestiae, voluptate reiciendis. Lorem
          ipsum dolor sit amet consectetur adipisicing elit. Non delectus omnis fuga, assumenda animi quas amet totam quod temporibus quam id perspiciatis rerum numquam natus porro dolorum qui? Incidunt, laborum? Lorem ipsum dolor sit amet consectetur,
          adipisicing elit. Laudantium praesentium beatae deserunt hic cupiditate quisquam. Ea, quo modi. Molestiae eveniet explicabo, debitis at fuga voluptatibus. Id dolorum quisquam voluptate quibusdam.</p>
      </article>
      <article id="article2">
        <h2>Article 2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, quae exercitationem error tempore enim eaque accusamus distinctio voluptatibus, hic similique expedita soluta velit in unde fugiat nostrum reprehenderit libero. Officiis? Lorem
          ipsum dolor sit amet consectetur adipisicing elit. Unde ut vitae ipsam cupiditate id quis, facere earum quo illum in architecto, repellat nemo non nobis totam. Blanditiis cum beatae quos? Lorem ipsum dolor sit amet consectetur, adipisicing elit.
          Delectus distinctio obcaecati soluta consectetur! Inventore molestias, quo ratione nisi cum quia optio perspiciatis provident eveniet, architecto sunt autem atque est doloremque!</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, deleniti perspiciatis aperiam at quae accusamus laudantium dicta nostrum. Nulla harum illo ipsum blanditiis esse, itaque alias. Ad, placeat! Eaque, incidunt? Lorem ipsum dolor sit
          amet consectetur adipisicing elit. Architecto expedita soluta odio doloribus impedit hic nobis unde corrupti facere, libero ex ut eius distinctio voluptatibus quia porro, ab delectus enim. Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Dicta veniam placeat, molestiae quia aliquid ullam fugiat tempore optio quaerat. Quasi cumque libero exercitationem omnis molestias ipsa, nesciunt quaerat itaque sit!</p>
      </article>
      <article id="article3">
        <h2>Article 3</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda provident accusantium iure voluptate accusamus commodi explicabo veniam quas enim tempore in, iste, culpa perferendis maiores, consequatur tenetur! Labore, voluptatibus amet.
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta soluta laboriosam ea? Expedita vero dolorum sequi libero voluptates? Illum nostrum omnis eos odit aliquid libero exercitationem aspernatur iusto repudiandae doloremque! Lorem ipsum
          dolor sit, amet consectetur adipisicing elit. Debitis beatae eum a fugiat alias maiores, itaque eaque consectetur voluptatibus doloribus praesentium odit labore sapiente asperiores sunt earum incidunt pariatur minima.</p>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus animi odio veniam inventore quisquam recusandae atque consectetur dolorum quod omnis illum qui, ex commodi. Facilis voluptatum aspernatur maxime assumenda consequuntur! Lorem ipsum
          dolor sit amet consectetur adipisicing elit. Molestias recusandae provident ratione in nulla. Iusto quia deleniti iste explicabo, assumenda fuga laborum error? Eaque commodi hic porro, quaerat optio minima? Lorem ipsum dolor sit, amet consectetur
          adipisicing elit. Animi labore similique a esse atque laborum delectus nostrum perferendis ipsum odio! Eveniet corrupti inventore nesciunt reprehenderit ex ipsum quaerat labore veniam!</p>
      </article>
    </div>
  </body>

</html>

删除溢出时导航栏背景不起作用：自动；从我的CSS

1 个答案: