我有一段 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 中删除背景。
fiddle :https://jsfiddle.net/sdmfoy8t/
最佳答案
在 .navbar 中将显示设置为 flex 可阻止 BG 颜色消失。您的 float 列表项 (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>关于html - 删除溢出时导航栏背景不工作 : auto; from my css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53106616/