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.
