将鼠标悬停在下拉菜单上时，父元素上的文本颜色会发生变化

Question

我看过一些与我的问题有些相似的问题，但我认为还没有运行完全像我的问题，或者我无法很好地比较示例，因为我对此很陌生。

当我将鼠标悬停在导航下拉菜单中的某个项目上时，原来的悬停效果发生了变化。我需要一些帮助，如果有任何提示，我将不胜感激！

<div id="menu-wrapper">
    <ul class="navbar">
        <li><a href="#">Home</a>
        </li>
        <li><a href="item1.htm">Item <span>&#9660;</span></a>

            <ul>
                <li><a href="#">Reviews</a>
                </li>
                <li><a href="#">Rants</a>
                </li>
            </ul>
        </li>
        <li><a href="item2.htm">Item <span>&#9660;</span></a>

            <ul>
                <li><a href="#">Reviews</a>
                </li>
                <li><a href="#">Rants</a>
                </li>
            </ul>
        </li>
        <li><a href="item3.htm">Item <span>&#9660;</span></a>

            <ul>
                <li><a href="#">Item Database</a>
                </li>
                <li><a href="#">Item by Location</a>
                </li>
                <li><a href="#">Articles</a>
                </li>
            </ul>
        </li>
        <li><a href="history.htm">Item</a>
        </li>
        <li><a href="about.htm">About</a>
        </li>
    </ul>
</div>

CSS 下面:

#menu-wrapper {
width:970px;
height:30px;
margin:0;
position:relative;
border-top: 1px solid #FFC98C;
border-bottom: 1px solid #FFC98C;
margin-top:20px;
z-index: 99;
}
.navbar {
width:970px;
height:30px;
padding:0;
margin:0;
position:absolute;
list-style-type:none;
font-family: 1.05em Raleway, sans-serif;
background-color: #FFF4D6;
}
.navbar li {
height:auto;
width:160px;
float:left;
text-align: center;
list-style: none;
margin-left: 1px;
font-family: 1.05em Raleway, sans-serif;
}
.navbar li span {
color:#ffde8c;
font-size:.80em;
}
.navbar a {
padding: 6px 0 6px 0;
text-decoration: none;
display:block;
font-family: Raleway, sans-serif;
color:#b89230;
}
.navbar li:hover, a:hover {
background-color: #b89230;
color:#fff4d6;
}
.navbar li ul {
display:none;
height:auto;
margin:0;
padding:0;
}
.navbar li:hover ul {
display:block;
}
.navbar li ul li {
background-color: #FFF4D6;
font-size: .95em;
}
.navbar li ul li a {
border-left: 1px solid gray;
border-right: 1px solid gray;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
font-size: .95em;
}
.navbar li ul li a:hover {
background-color: #D9B558;
color:#fff4d6;
}

这是我的 fiddle 向您展示我的问题，因为我可能无法很好地解释它：https://jsfiddle.net/Nimara/a8bwqvpe/

如果您发现任何冗余代码或有任何其他指示，请随时告诉我！我刚刚开始学习网页设计，很想知道任何可以帮助我变得更好的东西。

再次感谢！（很棒的网站顺便说一句，过去几个月我一直在使用它来解决我所有的问题）

Answer 1

我认为这将有助于解决您的问题：

.navbar li:hover > a {
    color: #fff4d6;
}

将鼠标悬停在下拉菜单上时，父元素上的文本颜色会发生变化

Color of text changes on parent element when items on the drop down menu are hovered over

html

css

navigation

drop-down-menu