css 整个菜单颜色在悬停时改变

Question

我真的是 html 和 css 的新手，我认为在学习教程的同时做一个元素会帮助我在学习很多东西的同时保持积极性。

我一直在尝试这个菜单，它几乎就在那里 - 但现在似乎有这堵墙，我只是不知道如何克服它!我在几个网站上搜索了几个小时，现在准备把这个东西扔出窗外……

这是一个 jsfiddle:http://jsfiddle.net/64Grv/

所以我想要实现的是，在悬停一个子菜单时，整个菜单会改变颜色(而不是现在悬停的链接)。例如，如果我将鼠标悬停在“更多内容”上，所有“menupoint2，内容，更多内容，甚至更多内容......”都应该改变颜色。

我该怎么办？我试过放置不同的类，但无济于事——我想我把它们放在了错误的地方。或者这可以用某种盒子实现吗？

我为我的 css 困惑表示歉意(只是一个初学者乱搞..)，如果有人有关于如何做到这一点的具体提示，我将非常感激 :)

非常感谢!

CSS:

#navigation ul
{
   margin:0px; 
   padding:0px;
   position:relative;
   text-align:center;
}
#navigation ul li
{
   display:inline; 
   float:right; 
   line-height:20px;
   list-style:none; 
   margin-right:3%;
   margin-top:5%;
   position:relative; 
}
#navigation li a
{ 
   display:block;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size:1em;
   color:#04B4AE; 
   text-decoration:none;
}
#navigation li a:hover
{  
   color:#08298A;
   text-decoration:none;
}
#navigation li ul
{ 
   font-size:0.8em;
   background-color:transparent;
   display:block;  
   margin:0px; 
   padding:0px;
   top:0.5em; 
}
#navigation li:hover ul
{   
   color:#04B4AE;
}
#navigation li li
{
   vertical-align:middle;
   list-style:none; 
   display:list-item;
   margin:auto;
   float:none;
}
#navigation li li a
{
   color:#04B4AE; 
   text-decoration:none;
}
#navigation li li a:hover
{ 
   color:#08298A;
   text-decoration:none;
}

Answer 1

你需要设置 :hover on li : http://jsfiddle.net/64Grv/1/

li:hover a {color:red}