CSS，悬停错误（第二意见）

Question

看起来像我有一个漫长的一天，有点累，想不到。无论如何，我有一个问题，我的CSS，我最近刚修复一个错误，然后添加CSS精灵，并将其实施到我的菜单。问题是我的主菜单的悬停状态正在印在我的子菜单上。 So body.currentpage #container #nav .mainmenu li ul li，将背景图像放在body.currentpage #nav li＃menu6 a：hover上。该html位于，http://www.letsmine.info/Sundalah。这里是CSS

#nav { 
height: 39px; 
margin: 0; 
width: auto; 
margin-bottom: -8px; 
} 
.mainmenu { 
background: url("../index_files/menu.jpg") repeat scroll 0 0 transparent; 
height: 39px; 
line-height: 30px; 
margin: 0; 
padding: 0; 
position: relative; 
width: 1024px; 
} 
#nav li, #nav li a { 
display: block; 
height: 39px; 
} 
#nav li { 
float: left; 
list-style: none outside none; 
margin: 0; 
padding: 0; 
position: absolute; 
top: 0; 
} 
#nav li ul { 
background-color: #F2EAD5; 
box-shadow: 3px 3px 3px #CC8930; 
color: #2A8AC6; 
float: none; 
font-family: "Arial"; 
font-size: 19px; 
margin-top: 8px; 
opacity: 0.9; 
text-align: center; 
padding: 0px; 
} 
body #nav li#menu1 { 
left: 0; 
width: 118px; 
} 
body #nav li#menu2 { 
left: 119px; 
width: 212px; 
} 
body #nav li#menu3 { 
left: 332px; 
width: 161px; 
} 
body #nav li#menu4 { 
left: 494px; 
width: 174px; 
} 
body #nav li#menu5 { 
left: 664px; 
width: 193px; 
} 
body #nav li#menu6 { 
left: 861px; 
width: 166px; 
} 
body.index #nav li#menu1 a:hover{ 
background: transparent url(../index_files/menu.jpg) 0 -39px no-repeat; 
} 
body.index #nav li#menu2 a:hover{ 
background: transparent url(../index_files/menu.jpg) -119px -39px no-repeat; 
} 
body.index #nav li#menu3 a:hover{ 
background: transparent url(../index_files/menu.jpg) -332px -39px no-repeat; 
} 
body.index #nav li#menu4 a:hover{ 
background: transparent url(../index_files/menu.jpg) -494px -39px no-repeat; 
} 
body.index #nav li#menu5 a:hover{ 
background: transparent url(../index_files/menu.jpg) -664px -39px no-repeat; 
} 
body.index #nav li#menu6 a:hover{ 
background: transparent url(../index_files/menu.jpg) -861px -39px no-repeat; 
} 
body.community #container #nav li ul { 
background-color: #AECEAB; 
} 
body.kids #container #nav li ul { 
background-color: #89BAB7; 
opacity: 0.8; 
} 
body.market #container #nav li ul { 
background-color: #FFD0CE; 
} 
body.sundays #container #nav li ul { 
background-color: #E7DAB2; 
} 
body.index #container #nav li ul { 
background-color: #E7DAB2; 
} 
body.contacts #container #nav li ul { 
background-color: #E7DAB2; 
} 
#nav li ul li a:link { 
text-decoration: none; 
} 
div#container div#nav li ul#sundays li { 
width: 211px; 
} 
div#container div#nav li ul#market li { 
width: 161px; 
} 
div#container div#nav li ul#kids li { 
width: 174px; 
} 
div#container div#nav li ul#community li { 
width: 193px; 
} 
#nav ul { 
position: absolute; 
top: 30px; 
visibility: hidden; 
} 
#nav li:hover ul { 
visibility: visible; 
z-index: 9999; 
} 
#nav li:hover { 
opacity: 1; 
} 
#nav li:hover ul li a:hover { 
opacity: 1; 
} 
.clearFloat { 
clear: both; 
margin: 0; 
padding: 0; 
} 
#nav #holder ul li { 
display: inline; 
} 

Answer 1

您可以通过改变这个选择解决这个问题之一：

body.index #nav li#menu2 a:hover { 
    background: transparent url(../index_files/menu.jpg) -119px -39px no-repeat; 
} 

这样：

body.index #nav li#menu2 > a:hover 

这样一来，仅a元素是direct childrenli#menu2将应用background。

您必须对6条相似规则中的每一条都执行相同的诀窍>。

---

你可以用同样的想法修复“填充文本”。

更改此选择：

#nav li 

这样：

#nav > li