当您放大页面时，我的导航栏有点重叠，下面详述了另一个问题

Question

当我放大屏幕或更改页面比例时，由于某种原因，我的导航栏重叠。我以为放入"弹性包装：nowrap"可以解决这个问题，但事实并非如此。

此外，当我放大或缩放页面时，导航栏不再附加到其下方的幻灯片元素，因为它处于全屏状态。对这两个问题的任何帮助将不胜感激。

*{
margin:0;
padding:0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
/*MyStyle.css*/
body {
margin: 0;
background: white;
background-repeat: no-repeat;

}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
flex-wrap: nowrap;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
flex-wrap: nowrap;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;

}

/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;

/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}

.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}

.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;

}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}

#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}

.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.announcement {
display: inline-block;
position: sticky;
top: 0;
height: 100%;
text-align: center;
width: 100%;
background: gold;
color: black;
font-family: 'Permanent Marker', cursive;
margin: 0;
padding: 0;
vertical-align: middle;
font-size: 30px;
z-index: 1;
}


.mySlides {
object-fit: cover;
width: 100%;

}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;

}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}

/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}


.title-block {
position: relative;
background: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}


.search-icon {
box-sizing: border-box;
width: 40px;
height: 40px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: relative;
top: 70px;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;

}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}

.container {
position: relative;
bottom: 0;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content: space-evenly;
align-items: baseline;
background: #323132;
text-decoration: none;
color: white;

}
.items {
background: transparent;
order: 4;
flex: 1 auto;
color: white;
padding: 40px;
width: 100px;
height: auto;
text-align: center;
font-family: Arial,sans-serif; 
font-size: 15px;
text-decoration: none;
overflow: hidden;
text-transform: uppercase;
}
.items a {
text-decoration: none;
color: #a2a4a7;

}
.items a:hover {
cursor: pointer;
color: white;
}

.vertical-right-1 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 20%;
box-shadow: 0.2px 0.2px;
}
.fa-facebook {
background: #3B5998;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-twitter {
background: #55ACEE;
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}
.fa-instagram {
background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
color: white;
font-size: 20px;
width: 50px;
padding: 15px;
margin: 5px 2px;
border-radius: 50%;
}

<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="MyStyle.css" />
<title>www.TheLeague.com</title>
</head>
<body>
<main>
<div class="announcement">
<p>Shop 20% Off All Jerseys!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 75px; margin-top: 5px;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
<div style="float:right; margin: 0 auto; width: 65px; margin-top: 30px;">
<a href="#" style="text-decoration: none; color: black"><i class="fa fa-shopping-cart"
style="font-size: 35px;"></i></a>
</div>
</div>
</div>
<div
style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px; font-family:'Alfa Slab One', cursive;">
<a style="text-decoration: none;" href="TheLeague.html">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>

<ul class="top-level-menu">
<li><a href="home.html"><i class="fa fa-home" style="font-size: 20px;"></i> Home</a></li>
<li>
<a href="shopall.html"><i class="fa fa-tag" style="font-size: 20px"></i> Shop All &#x25BC; </a>
<ul class="second-level-menu">
<li><a href="#">Jerseys</a></li>
<li><a href="#">Hats</a></li>
<li><a href="#">Gym Shorts</a></li>
</ul>
</li>
<li><a href="customize.html"><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</a></li>
<li>
<a href="teams.html"><i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams &#x25BC;</a>
<ul class="second-level-menu">
<li>
<a href="#">Soccer</a>
<ul class="third-level-menu">
<li><a href="#">Barcelona</a></li>
<li><a href="#">PSG</a></li>
<li><a href="#">Real Madrid</a></li>
</ul>
</li>
<li>
<a href="#">Basketball</a>
<ul class="third-level-menu">
<li><a href="#">Golden State Warriors</a></li>
<li><a href="#">Celtics</a></li>
<li><a href="#">Chicago Bulls</a></li>
</ul>
</li>
<li>
<a href="#">Football</a>
<ul class="third-level-menu">
<li><a href="#">New England Patriots</a></li>
<li><a href="#">Ravens</a></li>
<li><a href="#">Atlanta Falcons</a></li>
</ul>
</li>
</ul>
<li><a href="contactus.html"><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i>
Contacts Us</a>
</li>
</li>
</ul>
<div class="slideshow-container moving-images" data-pause="hover">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<!-- <div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>&#10094; Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next &#10095;</strong>
</button>
</div> -->
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>

<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}


var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>

<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="container">
<div class="items">
<br><br>
<p><a href="#" style="p">Find a Store</a></p><br>
<p><a href="#">Sign Up For Email</a></p><br>
<p><a href="#">Become A Member</a></p><br>
<p><a href="#">Site Feedback</a></p>
</div>
<div class="vertical-right-1" style="left: 25%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div>
<div class="items" style="text-decoration: none; color: white;">
<strong>
<p style="font-family: 'Cabin Condensed', sans-serif; font-size: 20px; padding: 10px;">About The
League</p>
</strong>
<p><a href="#">News</a></p><br>
<p><a href="#">Careers</a></p><br>
<p><a href="#">Investors</a></p><br>
<p><a href="#">Sustainability</a></p>
</div>

<div class="vertical-right-1" style="left: 50%; height: 90%; margin: 10px auto; padding: 20px 0; ">
</div>
<div class="items" style="text-decoration: none; color: white;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px; padding: 10px;">
<strong>Sports</strong></p>
<p><a href="#">Soccer</a></p><br>
<p><a href="#">Basketball</a></p><br>
<p><a href="#">NFL</a></p><br>
<p><a href="#">Tennis</a></p>
</div>
<div class="vertical-right-1" style="left: 75%; height: 90%; margin: 10px auto;  ">
</div>
<div class="items" style="text-decoration: none; color: white;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px; padding: 10px;">Need To Talk?</p>
<p><a href="#">Order Status</a></p><br>
<p><a href="#">Shipping and Delivery</a></p><br>
<p><a href="#">Returns</a></p><br>
<p><a href="#">Payment Options</a></p><br>
<p><a href="#">Contact Us</a></p><br>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
</div>

</div>


</main>
</body>


</html>

尝试更改页面的比例，您将看到这两个问题都发生了，而在 100% 缩放时似乎没有任何问题。

Answer 1

您已经为滑块提供了带有百分比单位的负"边距顶部"，因此它将随着窗口高度的变化而"适应"(在本例中是错误的(。以像素为单位添加值，它将起作用。像这样：

.slideshow-container {
max-width: auto;
position: relative;
margin-top: -56px;
}