如何解决我的滚动固定导航栏下拉菜单显示不正确
我创建了一个导航栏，当您滚动它时，它一直停留在页面顶部，但是我的下拉菜单无法正常运行。下拉菜单确实会显示，但是主要内容随后会向下移动，并且下拉菜单内容跨越显示的宽度。我不得不再次编辑它，因为我的某些代码丢失了。...任何帮助将不胜感激。谢谢
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
}
li a,.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,.dropdown:hover .dropbtn {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: sticky;
background-color: #f9f9f9;
min-width: 160px;
Box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
} <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Added text for scrolling</h3>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,illum deFinitiones no quo,maluisset concludaturque et eum,altera fabulas ut quo. Atqui cauSAE gloriatur ius te,id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,id agam
omnis evertitur eum.
Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.
</p>
</body>
</html>解决方法
您的代码中有一些问题。
发生的事情是您的下拉列表将所有内容下推，因此您应将其position更改为absolute。
您应该避免使用float，这是一个坏习惯，而且已经过时了。改为使用flex，如今它已受足够的支持。
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
display: flex;
align-items: center;
}
li {
position: relative
}
li a,.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,.dropdown:hover .dropbtn {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
left: 0;
top: 60px;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
} <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Added text for scrolling</h3>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,illum definitiones no quo,maluisset concludaturque et eum,altera fabulas ut quo. Atqui causae gloriatur ius te,id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet,id agam
omnis evertitur eum.
Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae
voluptatibus.
</p>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
