更改CSS菜单hover颜色

我的水平菜单有这个CSS：

.active { /* active/current link */ background: #666666; text-decoration:none; } .toggleMenu { /* small screen open menu option/link */ display: none; background: #666666; padding: 10px 15px; color: #ffffff; width:100%; text-align:center; } a { text-decoration: none; } .container { width: 100%; margin: 10px auto; } .nav { /* main nav bar */ list-style: none; *zoom: 1; background:#f36f25; text-align: center; } .nav:before,.nav:after { content: " "; display: table; } nav, ul, li, a { margin: 0; padding: 0; } .nav > li:hover { /* main link hover */ background: #666666; text-decoration:none; } .nav:after { clear: both; } .nav ul { list-style: none; width: 12em; } .nav a { padding: 10px 15px; color:#fff; } .nav li { position: relative; text-align: left; } .nav > li { display: inline-block; } .nav > li > .parent { background-image: url("/images/downArrow.png"); background-repeat: no-repeat; background-position: right; } .nav > li > a { display: block; } .nav li ul { position: absolute; left: -9999px; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top: 0; } .nav li li a { /* sub menu list */ display: block; background: #F36F25; position: relative; z-index:100; border-top: 1px solid #ffffff; } .nav li li.hover a { /* sub menu list hover */ background:#666666; } .nav li li li.hover a { /* sub sub menu list hover */ background:#F36F25; color:#ffffff; z-index:200; border-top: 1px solid #ffffff; } .nav li li li a { /* sub sub menu list */ background:#F36F25; } @media screen and (max-width: 760px) { .active { display: block; } .nav { border-top: none; } .nav > li { display: block; border-top: 1px solid #ffffff; } .nav > li > .parent { background-position: 95% 50%; } .nav li li .parent { background-image: url("/images/downArrow.png"); background-repeat: no-repeat; background-position: 95% 50%; } .nav ul { display: block; width: 100%; } .nav > li.hover > ul , .nav li li.hover ul { position: static; } } 

但我无法弄清楚如何更改子子菜单背景和hover背景颜色

这是一个小提琴： http ： //jsfiddle.net/UY7z4/1/

更新：

这是子菜单：

 .nav li li a { /* sub menu list */ display: block; background: #F36F25; position: relative; z-index:100; border-top: 1px solid #ffffff; } .nav li li.hover a { /* sub menu list hover */ background:#666666; } .nav li li li a { /* sub sub menu list */ background:#F36F25; } .nav li li li.hover a { /* sub sub menu list hover */ background:#666666; color:#ffffff; z-index:200; border-top: 1px solid #ffffff; } 

所以子菜单应该有#F36F25背景和#666666hover背景

子子菜单应该有#F36F25背景和#666666hover背景

Answer 1

您可以尝试使用此选择器进行子菜单：

 .nav >li ul > li a { background:red; } .nav >li ul >li:hover > a { background:blue; } 

对于子子菜单：

 .nav >li ul > li ul li a { background:pink; } .nav >li ul > li ul li:hover a { background:brown; } 

演示http://jsfiddle.net/UY7z4/11/

Answer 2

你需要添加：

 /*for hover*/ .nav li ul li:hover { background: #666666; text-decoration:none; } /*for background*/ .nav li ul li{ background: #F36F25 ; text-decoration:none; } 

Answer 3

这里更新了答案

http://jsfiddle.net/UY7z4/19/

 .nav > li > ul > li.hover > a { /* sub menu list hover */ background:#666666; } .nav > li > ul > li.hover > ul > li { /* sub sub menu list hover */ background:#F36F25; } .nav > li > ul > li.hover > ul > li:hover a { background:#666; color:#ffffff; z-index:200; border-top: 1px solid #ffffff; }