Dropdowns not sizing correctly - css

Question

I have a navigation bar that contains elements, two of them are dropdown menus. I fixed the size of the elements on the navigation bar, but Im not able to do it on the elements that drop down. When the drop down comes down it is too wide, but when I hover over the elements, part of only the "fixed width" I specified is highlighted, and the rest isn't. I want them all to be 100px with no extra space on the side, how can I do that?
Code:
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>
JSFiddle: https://jsfiddle.net/29r9d18a/22/

Answer 1

Remove min-width: 160px from your .dropdown-content CSS class.

Answer 2

Change min-width of this one .dropdown-content and add max-width: 100px; also add word-break: break-word;.
Like this
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
Here is the working code.
.topnav {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
align-items: center;
}
.topnav ul {
list-style-type: none;
margin: 0 auto;
display: inline-block;
-webkit-padding-start: 0;
}
.topnav li {
float: left;
}
.topnav li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
width: 100px;
}
.topnav li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: auto;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
word-break: break-word;
z-index: 1;
}
.topnav .dropdown-content a {
color: black;
padding: 12px 5px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav .dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li class="dropdown">Products
<div class="dropdown-content">
Computers
Tablets
Cell Phones
Wearable Technologies
Accessories
</div>
</li>
<li class="dropdown">Brands
<div class="dropdown-content">
Apple
Samsung
Lenovo
Dell
HP
Sony
Panasonic
Motorola
HTC
</div>
</li>
<li>Deals</li>
</ul>
</div>