html - 悬停子列表时更改列表选项的颜色

Question

我有一个列表，当鼠标悬停在其中一个选项上时，它会显示一个子列表。当我将鼠标悬停在第二个列表上的选项上时，我希望它更改列表项的背景颜色，我必须将鼠标悬停在该选项上才能获得第二个列表。

 #nav ul.topnav {
    	position: absolute;
    	text-align: center;
    	top: 10px;
    	right: 425px;
    }
    
    #nav li.n {
    	display: inline;
    	float: left;
    	width: 150px;
    	padding: 10px;
    }
    
    #nav a.na {
    	display: block;
    	padding: 10px, 10px;
    	text-decoration: none;
    	color: black;		
    	font-family: "Arial Black", Gadget, sans-serif
    }
    
    #nav a.na:hover {
    	color: #2E9AFE;
    	background: #848481;
    }
    
    #nav ul.innernav {
    	position: absolute;
    	display: none;
    }
    
    #nav li.n:hover ul.innernav {
    	display: block;
    	list-style-type: none;
    	text-align: center;
    	background: #A4A4A4;
    	top: 40px;
    	width: 110px;
    }
    
    #nav li.drop {
    	position: relative;
    	left: -45px;
    	padding: 5px;
    	width: 150px;
    }
    
    #nav li.drop:hover {
    	color: #2E9AFE;
    	background: #848484;
    }
    
    #nav li.drop:hover a.na {
    	background: #000000;
    }

<ul class="topnav">
    		<li class="n">
    			<a class="na" href="index.html">Blog</a>
    			<ul class="innernav">
    				<li class="drop">
    					Dungeons and Dragons
    				</li>
    				<li class="drop">
    					Video Games
    				</li>
    				<li class="drop">
    					Movies/T.V
    				</li>
    				<li class="drop">
    					News
    				</li>
    				<li class="drop">
    					Science
    				</li>
    			</ul>
    		</li>
    		<li class="n">
    			<a class="na" href="about.html">About Me</a>
    		</li>
    		<li class="n">
    			<a class="na" href="contact.html">Contact Me</a>
    		</li>
    	</ul>

我以为

 #nav li.drop:hover a.na{
        background: #000000;
    }

会得到它的工作

Answer 1

这是不可能的，因为 CSS 中没有父选择器。您可以使用 jQuery 完成此操作:

$("li.drop").hover(function(){
    $(this).closest("ul.innernav").siblings("a.na").css({"background":"red"}); 
    
},function(){
    $(this).closest("ul.innernav").siblings("a.na").css({"background":"transparent"}); 
});

这将只找到子菜单的 a 并改变颜色

EXAMPLE 1

或

因为所有内容都包含在 li.n 中，所以您可以随时在悬停时更改 a 的背景，如下所示:

#nav li.n:hover a{
   background: red;
}

EXAMPLE 2

更新

如果你只想让那个 li 悬停，你可以使用 nth-of-type

li.n:nth-of-type(1):hover a{
   background: red;
}

EXAMPLE 3