CSS, Hover error (Second Opinion)

Question

looks like i have had a long day, bit tired and can't think. Anyway i have a problem in my css, i recently just fixed one error, then added css sprites and implemented it into my menu. The problem is that the hover state of my main menu is being imprinted onto my sub menus. So body.currentpage #container #nav .mainmenu li ul li, is having a background image put on it from body.currentpage #nav li#menu6 a:hover. The html is located at, http://www.letsmine.info/Sundalah. Here is the 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

You can fix this one by changing the selector in this :

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

to this:

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

This way, only a elements that are direct children of li#menu2 will have the background applied.

You'll have to do the same > trick to each of the 6 similar rules.

---

You can fix the "stuffed text" with the same idea.

Change this selector:

#nav li

to this:

#nav > li