title: CSS, Hover error (Second Opinion)
body: <p>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, <a href="http://www.letsmine.info/Sundalah" rel="nofollow">http://www.letsmine.info/Sundalah</a>. Here is the CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>