Solved Drop down menu from main menu bar

Hello. Thank you in advance as this forum has always been helpful.

I recently made some changes to my primary menu bar by adding some CSS code to give it a background and change the padding between menu item. In the Divi/ Theme Customizer /header navigation/ primary menu bar setting I changed the color and size of my menu items. This seemed to change the color (to black) of the drop down menu items WHEN you scroll a bit down from anyone of my pages. If you do not scroll on a page the dropdown menu color is the original white color. How do i fix this. This is my CSS code that I am using for the primary menu:

header.et-l.et-l--header {
z-index: 99999;
position: relative;
}
#top-menu .sub-menu {
background-color: rgb(55,116,154); /* Background color dropdown */
border-top:0px solid #f2f6fa; /* Top border color dropdown */
}
#top-menu .sub-menu li a {
font-size: 12px; /* Font size dropdown */
width: 100%;
color: #fff;
border-bottom: 2px solid #789276; /* Border bottom menu item color */
}
.sub-menu li:hover {
background-color: #25313a; /* Hover color menu item */
}
.sub-menu .current_page_item {
background-color: #9dcef3; /* Current menu item color dropdown */
}
#top-menu .sub-menu li {
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
#top-menu .sub-menu {
padding-top: 0px;
padding-bottom: 0px;
}
#top-menu li li a {
padding-top: 0px;
padding-bottom: 0px;
}
.footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer { margin-top: 0 !important; }
.post-inner, .cover-header + .post-inner { padding-top: 0 !important }
/* Main Navigation Image*/
#main-header{
background:url(http://mrgrodskichemistry.com/wp-content/uploads/2021/11/Periodic-Main-menu-header-2.jpg)
no-repeat center;
background-size: cover;
}
@Media (min-width: 1200px) {
#top-menu li {
padding-right: 35px;
}}


Thank you for your time.
Ben

 

Thank you! That did it!