html - 当您放大页面和下面详述的另一个问题时，我的导航栏会重叠

Question

当我放大屏幕或更改页面比例时，我的导航栏由于某种原因重叠。我认为放入“flex-wrap：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% 缩放时似乎没有任何问题。

标签： htmlcssnavbar

Answer 1

你给你的滑块一个带有百分比单位的负“margin-top”，所以它会随着窗口高度的变化而“适应”（在这种情况下是错误的）。添加以像素为单位的值，它将起作用。就像是：

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