Same CSS code working for one button but not another - html

Question

I have a site I'm building which has a few dropdown menus. I'm sure this isn't being done in the most efficient way, but I'm curious why this is happening. I have the exact same CSS code for these dropdowns but one of them is nested under the main navigation and the other one is under a mobile menu (so like everything would be one under button).
The code works somewhat because when I've changed the display to be anything but none, the styling works fine and everything.. but for some reason, I just can't find out why the mobile menu dropdown isn't working but the main navbar one is.
Here's the code for the main nav bar dropdown:
#menu .dropdown {
top: -1px;
position: relative;
display: inline-block;
z-index: 9999;
margin-left: -6px;
margin-right: -7px;
}
#menu .dropbtn {
background-color: transparent;
color: white;
border: none;
font-family: 'chivolight';
font-size: 1em;
font-weight: 600;
letter-spacing: 1px;
}
#menu .dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 10em;
box-shadow: relative rgba(0, 0, 0, 0.2);
margin-top: -0.2em;
margin-left: 0.35em;
top: 2.8em;
z-index: 99;
}
#menu .dropdown-content a {
background: white;
padding: 0.4em 1em;
text-decoration: none;
display: block;
}
#menu .dropdown-content a:hover {
background-color: #ddd;
}
#menu .dropdown:hover .dropdown-content {
display: block;
}
#menu .dropdown:hover .dropbtn {
background-color: transparent;
}
```
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
And the code for the mobile menu dropdown:
#menuicon .icon-dropbtn {
background-color: white;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
#menuicon .icon-dropdown {
position: relative;
display: inline-block;
}
#menuicon .icon-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;
right: 0;
}
#menuicon .icon-dropbtn:hover {
opacity: 0.8;
transition: 0.3s;
}
#menuicon .icon-dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuicon .icon-dropdown-content a:hover {
background-color: #f1f1f1
}
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
#menuicon .icon-dropdown:hover .icon-dropbtn {
background-color: #3e8e41;
}
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn" style="font-size: 0.8em;"><font color=black><i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>

Answer 1

You have a misnamed hover selector in the mobile css:
#menuicon .icon-dropbtn:hover .icon-dropdown-content {
display: block;
}
should read:
#menuicon .icon-dropdown:hover .icon-dropdown-content {
display: block;
}

Answer 2

Select the mobile display classes:
#menuicon .icon-dropdown .icon-dropbtn{
//CSS for mobile display
}
or
Add same class to both buttons:
Like
Main:
<div id="menu" class="chivolight">
<ul>
<li>
<div class="dropdown">
<button class="dropbtn someclass">About Us</button>
<div class="dropdown-content">
Capabilties
Certifications
History
Quality
</div>
</div>
</li>
</ul>
</div>
Mobile:
<div id="menuicon">
<div class="icon-dropdown">
<button class="icon-dropbtn someclass" style="font-size: 0.8em;"><font
color=black>
<i class="fa fa-bars"></i></font></button>
<div class="icon-dropdown-content">
Link 1
Link 1
Link 1
</div>
</div>
</div>
Now use CSS for the given class:
.someclass{
//Now both buttons have same class
//Add CSS
}