0

我对 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;
}
4

3 回答 3

1

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

li:hover a {color:red}
于 2013-07-09T09:21:25.780 回答
1

尝试

li:hover a 
{
    color:yellow;
}
于 2013-07-09T09:27:58.853 回答
0

更新的小提琴链接在这里只是在下面更改

替换下面的代码

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

#navigation li:hover a {  
    color:#08298A;
    text-decoration:none;
}
于 2013-07-09T09:52:49.007 回答