将鼠标hover在子菜单上后突出显示父菜单项（HTML / CSS / Jquery）

我有一个菜单，有些菜单项可能有子项目。 实际上非常简单。 我想实现这一点，一旦子菜单被鼠标移过，相应的（父）菜单项也会被突出显示。 这种情况从未发生过，因为似乎只要鼠标离开菜单项并越过子菜单，浏览器就会将其设置为默认样式。 任何帮助赞赏！ 非常感谢！

菜单html：

 
 
item1
 
item2 
 
sub1
 
sub2
 
sub3
 
 
 
item3
 
item4
 
  

CSS：

 #top_navigation { width: 1248px; margin: 0 auto; position: relative; text-transform: uppercase; font-family: "Rounded Font", sans-serif; font-size: 23px; } #top_navigation ul ul { display: none; } #top_navigation ul { padding-left: 0; } #top_navigation ul li { margin: 0; padding: 0; float: left; width: 312px; height: 64px; line-height: 64px; font-size: 20px; list-style: none; } #top_navigation ul li a { display: block; text-align: center; text-decoration: none; color: #eb1f10; background-color: #FFF; } #top_navigation ul li.selected_menu_item a { background-color: #eb1f10; color: #FFF; } #top_navigation ul li a:hover { background-color: #eb1f10; color: #FFF; } #top_navigation li li { height: 42px; line-height: 42px; border-top: #eb1f10 1px solid; } 

JS / jQuery的：

 $(document).ready(function () { var $nav = $('#top_navigation > ul > li'); $nav.hover( function() { $('ul', this).stop(true, true).slideDown('fast'); }, function() { $('ul', this).slideUp('fast'); } ); }); 

示例可以在这里找到： http ： //jsfiddle.net/qguTz/

Answer 1

哦，现在我不知道以前怎么没发生过……我会回答的：

交换它就足够了：

 #top_navigation ul li a:hover { background-color: #eb1f10; color: #FFF; } 

为了这：

 #top_navigation ul li:hover > a { background-color: #eb1f10; color: #FFF; } 

Answer 2

要实现这一点，您需要两个小修改。

第一个是CSS。 我为已经存在的样式声明添加了一个选择器：

 #top_navigation ul li a:hover, #top_navigation ul li a.hovered { background-color: #eb1f10; color: #FFF; } 

然后我改变了css来添加那个类：

 $nav.hover( function() { $(this).children('a').addClass('hovered') $('ul', this).stop(true, true).slideDown('fast'); }, function() { $(this).children('a').removeClass('hovered') $('ul', this).slideUp('fast'); } ); 

一切顺利！ http://jsfiddle.net/qguTz/6/

Answer 3

http://jsfiddle.net/qguTz/10/

 $nav.hover( function() { $('ul', this).stop(true, true).slideDown('fast'); $('a',this).first().css({"background-color":"#eb1f10", "color":"#FFF"}); }, function() { $('ul', this).slideUp('fast'); $('a',this).first().css({"background-color":"#FFF", "color":"#eb1f10"}); }