HTML navbar drop-down box content not resizing properly when screen is resized

问题: In my CSS code, the navbar boxes resize when the screen's width changes and also resizes when the screen is smaller than 600px amount of pixels. The drop-down box and conte...

问题:

In my CSS code, the navbar boxes resize when the screen's width changes and also resizes when the screen is smaller than 600px amount of pixels. The drop-down box and content also resizes like the navbar boxes, however, the content is not resizing properly. When the screen is resized, the drop-down content is slightly smaller than the drop-down box, but, when the screen is less than 600px, it becomes larger than the box.

I had tried making the drop down content width the same as the boxes, however, this had no affect. I tried this with all the classes that is related to the content. None of them affected anything.

Note: I changed the background colour so that you can see how the content wasn't the same width as the drop-down box itself.

            body {
                background-color: blue;
            }
            p {
                color: white;
                font-size: 20px;
                display: inline;
                padding: 20px;
                font-family: arial;
            }
            .navbar {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: rgb(10,10,10);
                top: 0;
            }

            .navcont {
                margin: 0;
                position: relative;
                float: left;
            }

            .navcont a, .dropbtn {
                margin: 0;
                position: relative;
                display: block;
                color: white;
                font-size: 20px;
                text-align: center;
                padding: 5vh 7vw;
                text-decoration: none;
                border-right: 1px solid rgb(50,50,50);
                border-left: 1px solid rgb(50,50,50);
            }
            .navcont a:hover {
                transition-duration: 0.3s;
                background-color: rgb(30,30,30);
            }
            .navcont a:active {
                background-color: rgb(9,194,36);
            }
            .sticky {
                position: sticky;
                position: -webkit-sticky;
                top: 0;
                z-index:3
            }
            .dropdown:hover .dropbtn {
                transition-duration: 0.3s;
              background-color: red;
            }

            li.dropdown {
              display: inline-block;
            }

            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }

            .dropdown-content a {
              color: black;
              padding: 5vh 7.4vw;
              text-decoration: none;
              display: block;
              text-align: left;
            }

            .dropdown-content a:hover {
                background-color: #f1f1f1
            }

            .dropdown:hover .dropdown-content {
              display: block;
            }
            @media screen and (max-width: 600px) {
                .navcont a {
                    padding: 3vh 3vw;
                }
                .dropdown-content {
                    padding: 3vh 3vw;
                }
                a.dropdown-content {
                    padding: 3vh 3vw;
                    width: 100%;
                }
                .dropbtn {
                    padding: 3vh 3vw;
                }
                div.tr_about {
                    width: 60%;
                }
                div.tl_about {
                    width: 37.5%;
                }
            }
<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            <ul class="navbar">
                <li class="navcont"><a href="index.htm">Home</a></li>
                <li class="navcont"><a href="about.htm">About</a></li>
                <li class="navcont"><a href="purchase.htm">Purchase</a></li>
                <li class="dropdown" style="float: right;">
                    <a href="javascript:void(0)" class="dropbtn">Contact</a>
                    <div class="dropdown-content">
                        <a href="support.htm">Support</a>
                        <a href="faq.htm">FAQ</a>
                    </div>
                </li>
            </ul>
        </div>

    </body>
</html>

As mentioned above, I want the drop-down box content to have the same width as the drop-down box when the screen is being resized. However, the actual results I got was the content being slightly narrower than the drop-down box, and then when the screen is less than 600px wide, it becomes wider than the box.


回答1:

modify your media query like below

.dropdown-content {
                    padding: 1vh 1vw;
                    right:10px;
                }
                a.dropdown-content {
                    padding: 1vh 1vw;
                    width: 98%;
                }
                .dropdown-content a {
                  padding: 5vh 2.9vw;
                }

body {
                background-color: blue;
            }
            p {
                color: white;
                font-size: 20px;
                display: inline;
                padding: 20px;
                font-family: arial;
            }
            .navbar {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: rgb(10,10,10);
                top: 0;
            }

            .navcont {
                margin: 0;
                position: relative;
                float: left;
            }

            .navcont a, .dropbtn {
                margin: 0;
                position: relative;
                display: block;
                color: white;
                font-size: 20px;
                text-align: center;
                padding: 5vh 7vw;
                text-decoration: none;
                border-right: 1px solid rgb(50,50,50);
                border-left: 1px solid rgb(50,50,50);
            }
            .navcont a:hover {
                transition-duration: 0.3s;
                background-color: rgb(30,30,30);
            }
            .navcont a:active {
                background-color: rgb(9,194,36);
            }
            .sticky {
                position: sticky;
                position: -webkit-sticky;
                top: 0;
                z-index:3
            }
            .dropdown:hover .dropbtn {
                transition-duration: 0.3s;
              background-color: red;
            }

            li.dropdown {
              display: inline-block;
            }

            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }

            .dropdown-content a {
              color: black;
              padding: 5vh 7.4vw;
              text-decoration: none;
              display: block;
              text-align: left;
            }

            .dropdown-content a:hover {
                background-color: #f1f1f1
            }

            .dropdown:hover .dropdown-content {
              display: block;
            }
            
            @media (max-width:650px) {
              .navcont a {
                    padding: 3vh 3vw;
                }
                .dropdown-content {
                    padding: 1vh 1vw;
                    right:10px;
                }
                a.dropdown-content {
                    padding: 1vh 1vw;
                    width: 98%;
                }
                .dropdown-content a {
                  padding: 5vh 6.8vw;
                }
             }
            
            @media screen and (max-width: 600px) {
                .navcont a {
                    padding: 3vh 3vw;
                }
                .dropdown-content {
                    padding: 1vh 1vw;
                    right:10px;
                }
                a.dropdown-content {
                    padding: 1vh 1vw;
                    width: 98%;
                }
                .dropdown-content a {
                  padding: 5vh 2.9vw;
                }
                .dropbtn {
                    padding: 3vh 3vw;
                }
                div.tr_about {
                    width: 60%;
                }
                div.tl_about {
                    width: 37.5%;
                }
            }
<body>
        <div>
            <ul class="navbar">
                <li class="navcont"><a href="index.htm">Home</a></li>
                <li class="navcont"><a href="about.htm">About</a></li>
                <li class="navcont"><a href="purchase.htm">Purchase</a></li>
                <li class="dropdown" style="float: right;">
                    <a href="javascript:void(0)" class="dropbtn">Contact</a>
                    <div class="dropdown-content">
                        <a href="support.htm">Support</a>
                        <a href="faq.htm">FAQ</a>
                    </div>
                </li>
            </ul>
        </div>

    </body>


回答2:

PFB code that is working as per your requirement

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
                        body {
                background-color: blue;
            }
            p {
                color: white;
                font-size: 20px;
                display: inline;
                padding: 20px;
                font-family: arial;
            }
            .navbar {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: rgb(10,10,10);
                top: 0;
            }

            .navcont {
                margin: 0;
                position: relative;
                float: left;
                width: 24% !important;
            }

            .navcont a, .dropbtn {
                margin: 0;
                position: relative;
                display: block;
                color: white;
                font-size: 20px;
                text-align: center;
                padding: 5vh 7vw;
                text-decoration: none;
                border-right: 1px solid rgb(50,50,50);
                border-left: 1px solid rgb(50,50,50);
            }
            .navcont a:hover {
                transition-duration: 0.3s;
                background-color: rgb(30,30,30);
            }
            .navcont a:active {
                background-color: rgb(9,194,36);
            }
            .sticky {
                position: sticky;
                position: -webkit-sticky;
                top: 0;
                z-index:3
            }
            .dropdown:hover .dropbtn {
                transition-duration: 0.3s;
              background-color: red;
            }

        li.dropdown {
            display: inline-block; 
        }
            .dropdown-content {
              display: none;
              position: absolute;
              background-color: #f9f9f9;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
            }

            .dropdown-content a {
              color: black;
              padding: 5vh 7.4vw;
              text-decoration: none;
              display: block;
              text-align: left;
            }

            .dropdown-content a:hover {
                background-color: #f1f1f1
            }

            .dropdown:hover .dropdown-content {
              display: block;
            }
            @media screen and (max-width: 600px) {
                .navcont a {
                    padding: 3vh 3vw;
                }
                .dropdown-content {
                    padding: 3vh 3vw;
                }
                a.dropdown-content {
                    padding: 3vh 3vw;
                    width: 100%;
                }
                .dropbtn {
                    padding: 3vh 3vw;
                }
                div.tr_about {
                    width: 60%;
                }
                div.tl_about {
                    width: 37.5%;
                }
            }
        </style>
    </head>
    <body>
        <div>
            <ul class="navbar">
                <li class="navcont"><a href="index.htm">Home</a></li>
                <li class="navcont"><a href="about.htm">About</a></li>
                <li class="navcont"><a href="purchase.htm">Purchase</a></li>
                <li class="dropdown" style="/* float: right; */">
                    <a href="javascript:void(0)" class="dropbtn">Contact</a>
                    <div class="dropdown-content">
                        <a href="support.htm">Support</a>
                        <a href="faq.htm">FAQ</a>
                    </div>
                </li>
            </ul>
        </div>

    </body>
</html>
  • 发表于 2019-03-31 02:11
  • 阅读 ( 239 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除