着色父菜单点答案

【问题标题】：Coloring the parent-menu-point着色父菜单点
【发布时间】：2018-11-29 21:05:03
【问题描述】：

我的问题是，如果我将鼠标悬停在子菜单上，则上级菜单不会。我想悬停新闻和子点（例如补丁）。但如果我悬停补丁，新闻不会。我希望你能帮助我

这是我的代码。

nav  .aktuell > a{
    background-color: #576574;
}
nav {
    width: 100%;
    height: 48px;
    background-color: #8395A7;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav > ul > li {
    float: left;
}
nav > ul > li > ul {
    display: none;
}
nav > ul a {
    display: block;
    white-space: nowrap;
    padding: 15px;
    background: #8395A7;
    text-decoration: none;
}
nav ul > li > ul > li a {
    background: #8395A7;
    color: white;
}
nav > ul > li:hover > ul {
    display: block;
    position: absolute;
}
nav > ul > li > ul > li {
    position: relative;
}
nav ul li a:hover {
    background-color: #576574;
}
nav ul li a {
    color: white;
}

    	<nav>
    		<ul>
    			<li class="aktuell"><a href="index.html">Startseite</a></li>
    			<li><a>News</a>
    				<ul>
    					<li><a href="news-patches.html">Patches</a></li>
    					<li><a href="news-champions.html">Champions</a></li>
        			</ul>
    			</li>
    			<li><a href="guides.html">Guides</a></li>
    			<li><a href="kontakt.html">Kontakt</a></li>
    			<li><a href="impressum.html">Impressum</a></li>
    		</ul>
    	</nav>

感谢您的帮助:)

【问题讨论】：

（higher menu does not/News does not 没有什么？）
如果你悬停新闻>补丁我想将两者的背景颜色更改为#576574，但如果我悬停补丁新闻不会改变背景颜色
嗨，看看这是否有帮助：stackoverflow.com/questions/10953693/…

标签： html css menu hover dropdown

【解决方案1】：

你需要改变

nav ul li a:hover {
    background-color: #576574;
}

到

nav ul li:hover > a {
    background-color: #576574;
}

nav  .aktuell > a{
    background-color: #576574;
}
nav {
    width: 100%;
    height: 48px;
    background-color: #8395A7;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav > ul > li {
    float: left;
}
nav > ul > li > ul {
    display: none;
}
nav > ul a {
    display: block;
    white-space: nowrap;
    padding: 15px;
    background: #8395A7;
    text-decoration: none;
}
nav ul > li > ul > li a {
    background: #8395A7;
    color: white;
}
nav > ul > li:hover > ul {
    display: block;
    position: absolute;
}
nav > ul > li > ul > li {
    position: relative;
}
nav ul li:hover > a {
    background-color: #576574;
}
nav ul li a {
    color: white;
}

<nav>
    		<ul>
    			<li class="aktuell"><a href="index.html">Startseite</a></li>
    			<li><a>News</a>
    				<ul>
    					<li><a href="news-patches.html">Patches</a></li>
    					<li><a href="news-champions.html">Champions</a></li>
        			</ul>
    			</li>
    			<li><a href="guides.html">Guides</a></li>
    			<li><a href="kontakt.html">Kontakt</a></li>
    			<li><a href="impressum.html">Impressum</a></li>
    		</ul>
    	</nav>

【讨论】：

【解决方案2】：

替换此行

nav ul li:hover a {
 background-color: #576574;
}

【讨论】：