希望悬停菜单和子菜单具有相同的功能-当前项目的问题

Question

我正在一个网站上工作，除了一件事之外，几乎都具有我想要的菜单。当我在主菜单中选择一个具有子项的项目时，父项的样式将应用于子菜单项，即子菜单项看起来像是“当前”。我希望主菜单和子菜单在悬停时表现相同（即，在选择主菜单项时，不要将当前样式应用于子菜单项）。 因此，项目应为黑色且无行。

/* -------------------- Header -------------------- */
/* including image */

/* allow image to be at top with nav over it */
.et-l.et-l--header {
    position: absolute;
    width: 100%;
    color: #fff;
}

#menu-main-menu .current-menu-item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#menu-main-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #A60207; /*** COLOR OF THE LINE ***/
 height: 1px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#menu-main-menu li a:hover {
 opacity: 1 !important;
}
#menu-main-menu li a:hover:before {
 right: 0;
}

#menu-main-menu li li a {
	color: black;
}

#menu-main-menu li li a:before {
 bottom: 10%;
}

.et-menu .menu-item-has-children>a:first-child {
    padding-right: 20px;
    padding-bottom: 20px;
}

.et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
    background-color: rgba(242,242,242,0.9)!important;
    border-color: rgba(0,0,0,0);
}

/* -------------------- Sub-Menu -------------------- */

.nav li li {
    position: relative;
    line-height: 1.5em;
}

.et_pb_fullwidth_menu .et_pb_menu__menu>nav>ul>li>ul, 
.et_pb_menu .et_pb_menu__menu>nav>ul>li>ul {
    top: calc(100% - 1px);
    left: 0;
}
.et_pb_fullwidth_menu .et-menu-nav>ul ul, 
.et_pb_menu .et-menu-nav>ul ul {
    padding: 10px 0;
    text-align: left;
}

<div class="et_pb_menu__menu">
								<nav class="et-menu-nav"><ul id="menu-main-menu" class="et-menu nav"><li class="et_pb_menu_page_id-home menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-161"><a href="https://hqelectricstag.wpengine.com/">HOME</a></li>
<li class="et_pb_menu_page_id-18 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-has-children menu-item-162"><a href="https://hqelectricstag.wpengine.com/about-high-quality-electric/" aria-current="page">ABOUT US</a>
<ul class="sub-menu">
	<li class="et_pb_menu_page_id-186 menu-item menu-item-type-post_type menu-item-object-page menu-item-188"><a href="https://hqelectricstag.wpengine.com/testimonials/">Testimonials</a></li>
	<li class="et_pb_menu_page_id-560 menu-item menu-item-type-post_type menu-item-object-page menu-item-565"><a href="https://hqelectricstag.wpengine.com/reviews/">Write a Review</a></li>
</ul>
</li>
<li class="et_pb_menu_page_id-541 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-546"><a href="https://hqelectricstag.wpengine.com/electrician-services/">SERVICES</a>
<ul class="sub-menu">
	<li class="et_pb_menu_page_id-294 menu-item menu-item-type-post_type menu-item-object-page menu-item-296"><a href="https://hqelectricstag.wpengine.com/residential-electrician-services/">Home Electrician</a></li>
	<li class="et_pb_menu_page_id-314 menu-item menu-item-type-post_type menu-item-object-page menu-item-316"><a href="https://hqelectricstag.wpengine.com/commercial-electric-services/">Commercial Electrician</a></li>
	<li class="et_pb_menu_page_id-466 menu-item menu-item-type-post_type menu-item-object-page menu-item-468"><a href="https://hqelectricstag.wpengine.com/outdoor-lighting/">Outdoor Lighting</a></li>
	<li class="et_pb_menu_page_id-464 menu-item menu-item-type-post_type menu-item-object-page menu-item-479"><a href="https://hqelectricstag.wpengine.com/indoor-residential-lighting/">Indoor Lighting</a></li>
	<li class="et_pb_menu_page_id-519 menu-item menu-item-type-post_type menu-item-object-page menu-item-521"><a href="https://hqelectricstag.wpengine.com/home-generator/">Home Generators</a></li>
</ul>
</li>
<li class="et_pb_menu_page_id-327 menu-item menu-item-type-post_type menu-item-object-page menu-item-511"><a href="https://hqelectricstag.wpengine.com/residential-electric-faqs/">FAQs</a></li>
<li class="et_pb_menu_page_id-105 menu-item menu-item-type-post_type menu-item-object-page menu-item-154"><a href="https://hqelectricstag.wpengine.com/contact/">CONTACT</a></li>
</ul></nav>
							</div>

Answer 1

尽管不是我想出一个解决方案，但这是解决方案（以防其他人帮助）。它并没有像我想要的那样“轻松”，但是我可以继续努力。有时，最难找到的是简单的解决方案！

.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a:not(:hover)  {
    color: #444444!important;
}

#menu-main-menu li a:not(:hover):before    {   background: transparent; }