Question

看起来我已经度过了漫长的一天，有点累，无法思考。无论如何我在我的CSS中有问题，我最近修复了一个错误，然后添加了css sprites并将其实现到我的菜单中。问题是我的主菜单的悬停状态正在印在我的子菜单上。所以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 li#menu2 background个>元素才能应用#nav li。

您必须对6个类似规则中的每一个执行相同的#nav > li诀窍。

您可以使用相同的想法修复“填充文本”。

更改此选择器：

{{1}}

到此：

{{1}}

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

1 个答案: