CSS-如何在其子菜单下保持悬停颜色？

我试图建立导航菜单，但我有一些css悬停颜色的问题。 我的问题是，我如何在它们的父项上保持悬停颜色

例如： 如果鼠标指针指向服务2.3.3.3，如何保持悬停颜色如下：

服务

服务2

服务2.3

服务2.3.3

服务2.3.3.3

或者，如果鼠标指针指向服务2.1，如何保持悬停颜色如下：

服务

服务2

服务2.1

如何保持悬停的颜色与此相似， 谢谢

@font-face{
字体系列：“氧气常规”；
src:url（'../fontlar/Oxygen-Regular.eot'）；
src:url（'../fontlar/Oxygen Regular.eot'）格式（'embedded-opentype'），
url（'../fontlar/Oxygen Regular.woff'）格式（'woff'），
url（'../fontlar/Oxygen Regular.woff2'）格式（'woff2'），
url（'../fontlar/Oxygen Regular.ttf'）格式（'truetype'），
url（'../fontlar/Oxygen Regular.svg'）格式（'svg'）；
字体大小：400；
}
@字体{
字体系列：“oxygen bold”；
src:url（'../fontlar/Oxygen Bold.eot'）；
src:url（'../fontlar/Oxygen Bold.eot'）格式（'embedded-opentype'），
url（'../fontlar/ROxygen Bold.woff'）格式（'woff'），
url（'../fontlar/Oxygen Bold.woff2'）格式（'woff2'），
url（'../fontlar/Oxygen Bold.ttf'）格式（'truetype'），
url（'../fontlar/Oxygen Bold.svg'）格式（'svg'）；
}
@字体{
字体系列：“raleway bold”；
src:url（'../fontlar/ralway Bold.eot'）；
src:url（'../fontlar/ralway Bold.eot'）格式（'embedded-opentype'），
url（'../fontlar/ralway Bold.woff'）格式（'woff'），
url（'../fontlar/ralway Bold.woff2'）格式（'woff2'），
url（'../fontlar/ralway Bold.ttf'）格式（'truetype'），
url（'../fontlar/ralway Bold.svg'）格式（'svg'）；
}
@字体{
字体系列：“raleway常规”；
src:url（'../fontlar/ralway Regular.eot'）；
src:url（'../fontlar/ralway Regular.eot'）格式（'embedded-opentype'），
url（'../fontlar/ralway Regular.woff'）格式（'woff'），
url（'../fontlar/ralway Regular.woff2'）格式（'woff2'），
url（'../fontlar/ralway Regular.ttf'）格式（'truetype'），
url（'../fontlar/ralway Regular.svg'）格式（'svg'）；
}
@字体{
字体系列：“raleway semibold”；
src:url（'../fontlar/ralway SemiBold.eot'）；
src:url（'../fontlar/ralway SemiBold.eot'）格式（'embedded-opentype'），
url（'../fontlar/ralway SemiBold.woff'）格式（'woff'），
url（'../fontlar/ralway SemiBold.woff2'）格式（'woff2'），
url（'../fontlar/ralway SemiBold.ttf'）格式（'truetype'），
url（'../fontlar/ralway SemiBold.svg'）格式（'svg'）；
}
身体{
保证金：0；
填充：0；
背景：#fff；
}
* {
框大小：边框框；
}
.菜单{
宽度：100%；
高度：自动；
利润率：100px0；
填充：0 60px；
浮动：左；
}
.菜单ul{
宽度：100%；
高度：自动；
保证金：0；
填充：0；
浮动：左；
}
李先生{
列表样式：无；
保证金：0；
填充：0；
浮动：左；
位置：相对位置；
}
.菜单ul li a{
颜色：#0066cc；
字体大小：13px；
文本转换：大写；
字体系列：雷威粗体；
背景：#fff；
填充：10px 20px；
/*右边框：#502b06 1px实心*/
文字装饰：无；
过渡：所有.3s易于输入输出；
浮动：左；
}
.菜单ul li a：悬停{
背景：#ff6600；
颜色：#fff；
}
.菜单ul li>ul{
位置：绝对位置；
最高：100%；
左：0；
宽度：200px；
不透明度：0；
可见性：隐藏；
过渡：所有.3s易于输入输出；
背景色：黑色；
}
.菜单ul li>ul li{
宽度：100%；
}
.菜单ul li>ul li a{
宽度：100%；
边框底部：#0066cc 1px实心；
边界权：无；
背景色：白色；
边框：1px实心#eee；
}
.菜单ul li：悬停>ul{
不透明度：1；
能见度：可见；
}
.菜单ul li：悬停>ul li{
左：100%；
排名：0；
}
@仅介质屏幕和（最大宽度：767px）{
li a span.fas分区{
显示：无；
}
}

梅特麦科纳

试试这个。我更改了几个悬停类，将重点放在li元素而不是a元素上，并删除了黑色背景色

正文{
保证金：0；
填充：0；
背景：#fff；
}
* {
框大小：边框框；
}
.菜单{
宽度：100%；
高度：自动；
利润率：100px0；
填充：0 60px；
浮动：左；
}
.菜单ul{
宽度：100%；
高度：自动；
保证金：0；
填充：0；
浮动：左；
}
李先生{
列表样式：无；
保证金：0；
填充：0；
浮动：左；
位置：相对位置；
}
.菜单ul li a{
颜色：#0066cc；
字体大小：13px；
文本转换：大写；
字体系列：雷威粗体；
填充：10px 20px；
文字装饰：否