Hover menu - problém v IE8

<div id="menu">
  <ul>
    <li><a href = "index.php" title="Úvodní strana">ÚVOD</a></li>
    <li><a href = "historie.php" title="Historie obce">HISTORIE</a></li>
    <li><a href = "fotky.php" title="Fotografie">GALERIE</a>
      <ul>
       <li><a href = "fotoobora.php" title="Fotografie Obora">Obora</a></li>
       <li><a href = "fotomarsov.php" title="Fotografie Maršov">Maršov</a></li>
       <li><a href = "fotozelec.php" title="Fotografie Želeč">Želeč</a></li>
       <li><a href = "fotolom.php" title="Fotografie Lom">Lom</a></li>
       <li><a href = "fotomalsice.php" title="Fotografie Malšice">Malšice</a></li>
       <li><a href = "fotozhor.php" title="Fotografie Zhoř">Zhoř</a></li>
       <li><a href = "fotoustrasice.php" title="Fotografie Ústrašice">Ústrašice</a></li>
       <li><a href = "fotoplana.php" title="Fotografie Planá n.L.">Planá n.L.</a></li>
      </ul>
    </li>
    <li><a href = "owebu.php" title="Něco o webu">O WEBU</a></li>
  </ul>
</div> 

#menu, #menu * {margin: 0; padding:0; height: 40px; background-image:url('pictures/menu.jpg');}

#menu li {display: inline; float:left;}

#menu li a {
  display: block;
  background: 0 0 no-repeat;  /* Kvuli zobrazeni */
  height: 40px;
  width: 141px;
  line-height: 40px;
  font-size: 17px;
  font-family: verdana;
  text-align: center;
  text-decoration: none;
  }
  
#menu li a:hover {
  background: #00c92f;
  color: white;
  }
 
/* Vysouvaci menu */ 
#menu li ul {
  display: none;
  }
  
#menu li:hover ul {
  display: block;
  position: absolute;
  border: solid #eee;
  border-width: 0 1px 1px 1px;
  }
  
#menu li:hover ul li {
  display:block;
  float:none;
  height: 40px;
  width: 141px;
  border-top: 1px solid #fff2e5;
  background: black;
  }

#menu a:visited, #menu a:link, .mapa a:visited, .mapa a:link, .mapaSeznam a:visited, .mapaSeznam a:link {text-decoration: none; color: #00aeed;}