Question

我是html和css的新手，我认为在完成教程的同时有一个项目可以帮助我在学习的过程中保持积极性。

我一直在玩这个菜单，它几乎就在那里 - 但现在似乎有这面墙，我只是不知道如何克服它！我已经在几个网站上搜索了几个小时，现在我已准备好把这个东西扔到窗外......

所以我想要实现的是，在一个子菜单的悬停时，整个菜单会改变颜色（而不是现在的悬停链接）。如果我徘徊在“更多的东西”，例如，所有“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

你需要设置：悬停在li上： http://jsfiddle.net/64Grv/1/

li:hover a {color:red}

Answer 2

尝试

li:hover a 
{
    color:yellow;
}

Answer 3

更新的小提琴链接 here 刚刚更改

替换以下代码

#navigation li a:hover
    color:#08298A;
    text-decoration:none;
}

<强>与

#navigation li:hover a {  
    color:#08298A;
    text-decoration:none;
}

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

3 个答案: