父菜单项在悬停子菜单时悬停

Question

我的网站 http://jointviews.com/ 带有标题菜单。关于我们和数字营销的标题菜单项在每个项目下都有子菜单。当我将鼠标悬停在下拉子菜单项上时，父菜单背景将更改为默认背景。它应该像悬停位置一样，因为我们位于该特定菜单项的子菜单中。

我尝试给予

li.current-menu-ancestor {
  color: #fff;
  background: #f29919;
}

但是没用

请帮忙。 谢谢。

编辑： 代码

<ul id="menu-main" class="menu"><li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-24"><a href="http://jointviews.com/">Home</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://jointviews.com/about-us/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="http://jointviews.com/testimonials/">Testimonials</a></li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-27"><a href="http://jointviews.com/digital-marketing/">Digital Marketing</a>
<ul class="sub-menu">
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://jointviews.com/digital-marketing/seo/">SEO</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://jointviews.com/digital-marketing/social-media-marketing/">Social Media Marketing</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://jointviews.com/digital-marketing/email-marketing/">Email Marketing</a></li>
<li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://jointviews.com/digital-marketing/sem/">SEM</a></li>
<li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="http://jointviews.com/digital-marketing/content-marketing/">Content Marketing</a></li>
</ul>
</li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://jointviews.com/portfolio/">Portfolio</a></li>
<li id="menu-item-258" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-258"><a href="http://jointviews.com/blog/">Blog</a></li>
<li id="menu-item-253" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-253"><a href="http://jointviews.com/contact-us/">Contact Us</a></li>
</ul>

CSS：

ul.sub-menu{position:relative;
z-index:40;}
ul#menu-main ul {
display: none;
}

 ul#menu-main li:hover > ul {
    display: block;background-color: #fff;
} ul#menu-main {



position: relative;
display: inline-table;
top: 42px;
position: relative;
float:right;
margin-bottom: 0px;
clear: both;
padding: 0 0 0 20px;
background: transparent!important;
list-style: none;
height: 60px;
font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
font-size: 18px;
}
 ul#menu-main:after {
    content: ""; clear: both; display: block;
 }
 ul#menu-main li {
float: left;
line-height: 60px;
    z-index: 40;
margin-left: 15px;
}

     ul#menu-main li a:hover {
        color: #fff;
background: #f29919;

    }
ul#menu-main ul li{ border-bottom:1px solid #eee;}
 ul#menu-main ul li a:hover {
        color: #818181;
background: #eee;

    }


 ul#menu-main li a {
    display: block;
    font-family: BebasNeueRegular, Helvetica, Arial Narrow, sans-serif;
    padding: 0 20px;
        color: #818181;
        text-decoration: none;
}
ul#menu-main ul {
 border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
 ul#menu-main ul li {
    float: none; 

    position: relative;
list-style:none;
/*width: 180px;*/
line-height: 37px;
margin-left: 0px;
}ul#menu-main ul li:first-child{border-top: 1px solid white;}

         ul#menu-main ul ul li a:hover {
            color:white;
        }

ul#menu-main ul ul {
position: absolute; left: 100%; top:-1px;
}
ul#menu-main li.current-menu-item > a{
color: #fff;
}


ul#menu-main ul ul li:hover a{
    color: #333333;
}

小提琴

Answer 1

改变

 ul#menu-main li a:hover { ... }

到

 ul#menu-main > li:hover > a { ... }

>

运算符仅选择相应元素的第一级子元素。

编辑：编辑以更改之前的答案，当前答案是用最少的努力更好的解决方案。

EDIT2：删除了我不小心放在那里的额外元素。

Answer 2

如果您想为您的企业制作在线或数字菜单，您可以使用https://softmenu.ir

使用这个平台，您不需要托管网站或编写程序。