Background guideline doesn't apply to submenu

I am optimizing the menu of my website's company for mobiles and tablets and setting up a background gradient color. The color doesn't seem to apply to the submenu, which remains greyish no matter what I change in my code.

Our company uses the Divi builder from Elegant Themes on Wordpress, and I'm not very familiar with it.

I've tried to look for this greyish color in my code to change it to transparent, but I can't find it.

I have also tried to style the submenu items individually, but if I change their background color, for example to black, it does work but I can still see the greyish block behind it (on the edges).

.et_pb_text ul, .et_pb_text ol { margin: 30px; }

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
    content: '\4d';
}

/* Changes color of hamburger icon*/

span.mobile_menu_bar:before {
    color: #223343 !important;
}

/*Removes blue line below menu bar*/ 
.et_mobile_menu { border-top: 0px; }

/*Sticks the menu to the top of the page*/
@media only screen and (max-width: 980px) {
.et_fixed_nav #main-header, 
.et_fixed_nav #top-header,
.et_non_fixed_nav.et_transparent_nav #main-header,
.et_non_fixed_nav.et_transparent_nav #top-header {
    position: fixed;
    background-color: white;
}
}
.et_mobile_menu {
    overflow: scroll !important;
    max-height: 80vh;
}

/* Nests submenu items */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
 content: '\4d';
}

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after, 
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
 content: '5' ;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
 position: relative;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
 position: absolute;
 background-color: rgba(0,0,0,0.03);
 z-index: 1;
 width: 36px;
 height: 36px;
 line-height: 36px;
 border-radius: 50%;
 top: 6px;
 right: 10px;
 cursor: pointer;
 text-align: center;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
 background-color: rgba(0,0,0,0.1);
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
 font-family: "ETmodules" !important;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 line-height: 36px;
 font-size: 24px;
 color: white;
 text-transform: none;
 speak: none;
 content: '\33';
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
 content: '\32';
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
 display: none !important;
 padding-left: 0;
}

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
 display: block !important;
 background-color: rgba(0,0,0,0.03);
}

 #main-header #mobile_menu.et_mobile_menu li li {
 padding-left: 0;
}

#main-header #mobile_menu.et_mobile_menu li a, 
#main-header #mobile_menu.et_mobile_menu li li a,
#main-header #mobile_menu.et_mobile_menu li li li a {
 padding-left: 20px;
 padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children .sub-menu-toggle + a {
 padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
 background-color: transparent;
 font-weight: inherit;
}

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
 font-weight: bolder;
}


/*Changes the background color to custom gradient*/
.mobile_nav.closed #mobile_menu, 
.mobile_nav.opened #mobile_menu {
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
      background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
      background: -o-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
      background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(34,51,67,1) 0%, rgba(62,151,195,1) 28%, rgba(62,151,195,1) 48%, rgba(75,158,137,1) 100%, rgba(41,137,216,1) 100%);
      background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(34,51,67,1) 0%,rgba(62,151,195,1) 28%,rgba(62,151,195,1) 48%,rgba(75,158,137,1) 100%,rgba(41,137,216,1) 100%);
}

The menu should have the gradient everywhere, including when I open the submenu. Instead, the submenus (I have three menu headers that open one submenu each) are wrapped in a greyish block that I can't get rid of.

Any help is welcome. Thanks

Edit

Here is the HTML part for the menu item that causes the problem and a screenshot of what it looks like.

<a>Features</a>
<ul class="sub-menu">
    <li class="ds-custom-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5043 current_page_item menu-item-5739"><a href="https://mywebsite.com/back-office/?customize_changeset_uuid=5733c529-17ca-464a-b7c4-c59f331a9176&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-30" target="_self">Back-Office</a></li>
    <li class="ds-custom-link menu-item menu-item-type-post_type menu-item-object-page menu-item-5740"><a href="https://mywebsite.com/mid-office/?customize_changeset_uuid=5733c529-17ca-464a-b7c4-c59f331a9176&amp;customize_autosaved=on&amp;customize_messenger_channel=preview-30" target="_self">Mid-Office</a></li>
</ul>

Solution

Using the inspector, find the culprit and identify which class or which line is causing the issue.

In your case, check in your CSS files and see if a background-color is applied to .sub-menu.