背景指南不适用于子菜单

Question

我正在针对手机和平板电脑优化网站公司的菜单，并设置背景渐变颜色。颜色似乎不适用于子菜单，无论我在代码中进行了什么更改，该子菜单均保持灰色。

我们公司使用Wordpress上“ Elegant Themes”中的Divi构建器，我对此不太熟悉。

我尝试在代码中寻找这种灰色，以将其更改为透明，但找不到。

我也尝试过单独设置子菜单项的样式，但是如果我将其子菜单背景颜色更改为例如黑色，它确实可以工作，但仍然可以看到其后面的灰色块（在边缘）。

.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%);
}

菜单应该到处都有渐变，包括我打开子菜单时的渐变。取而代之的是，子菜单（我有三个菜单标题，每个菜单标题都打开一个子菜单）被包裹在一个无法摆脱的灰色块中。

欢迎任何帮助。谢谢

修改

这是导致问题的菜单项的HTML部分，以及其外观的屏幕截图。

<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>

Answer 1

使用检查员，找出罪魁祸首，并确定引起问题的是哪类或哪一行。

以您为例，检查您的CSS files并查看是否将::ng-deep应用于background-color。