Botonera acordeon

[IruLaN]

Hola!

Estoy realizando una botonera en acordeón y para variar me da problemas en ie.
Creo que tiene algo que ver con la lista dentro del span o con los enlaces...

La verdad es que no se como solucionarlo.

Agradezco vuestros consejos.

CÓDIGO HTML:

Código:

<div class="outer">
  <ul id="menu">
   <li>
    <a href="#">
     <img src="images/arquitecturaLink.jpg" alt="arquitectura" title="arquitectura"/>
     <span>
      <ul>
        	<li><a href="#">Trámites legales</a></li>
            <li><a href="#">Reforma y rehabilitación</a></li>
            <li><a href="#">Project Manajement</a></li>
            <li><a href="#">Urbanismo</a></li>
            <li><a href="#">Decoración-Interiorismo</a></li>
            <li><a href="#">Paisajismo</a></li>
            <li><a href="#">Obra Nueva</a></li>
            <li><a href="#">Concursos</a></li>
        </ul>
     </span>
     </a>
   </li>
   <li>
    <a href="#">
     <img src="images/empresa.jpg" alt="Arquitectura Corporativa" title="arquitectura corporativa" />
    </a>
   </li>
   <li>
    <a href="#">

     <img src="images/disenograficoLink.jpg" alt="diseño grafico" title="diseño grafico" />
     <span>
     	<ul>
        	<li><a href="#">Imagen Corporativa</a></li>
            <li><a href="#">Diseño Publicitario</a></li>
            <li><a href="#">Editorial</a></li>
            <li><a href="#">Packaging</a></li>
            <li><a href="#">Ilustración</a></li>
            <li><a href="#">Eventos</a></li>
        </ul>
      	
     </span>
    </a>
   </li>

   <li>
    <a href="#">
     <img src="images/empresa.jpg" alt="Diseño Multimedia" title="Diseño Multimedia" />
     <span>
     	 <ul>
         	<li><a href="#">Diseño Web</a></li>
         </ul>
     </span>

    </a>
   </li>
   <li>
    <a href="#">
     <img src="images/empresa.jpg" alt="Servicios" title="Servicios" />

    </a>
   </li>
   <li>
    <a href="#">
     <img src="images/empresaLink.jpg" alt="Empresa" title="Empresa" />
     <span>
     	 <ul>
         	<li><a href="#">Equipo</a></li>
            <li><a href="#">Política de Empresa</a></li>
         </ul>
     </span>

    </a>
   </li>
   
    
  </ul>
</div>

CÓDIGO CSS

Código:

#menu {
  margin:10px 15px; 
  padding:0; 
  width:750px;
  height:130px;
  overflow:hidden; 
  background:#352f2e;
  }
#menu li {
  display:inline;
  list-style-type:none; 
  }
#menu li a {
  display:block;
  float:left;
  text-decoration:none; 
  margin:0; 
  }
#menu li a img {
  opacity:0.7;
  margin:3px;
  border:0;
  float:left;
  }
#menu li a span {
  display:none;
  }

#menu li a:hover {
  background:#cfc196;
  }
#menu li a:hover img {
  opacity:1;
  }
#menu li a:hover span {
	width:150px;
	height:125px;
  	color:#aaa;
  	display:block; 
  	cursor:pointer;
  	float:left;
  	margin:0;
  }


.outer {
  background:transparent; 
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  float:left;
  }

#menu span ul {
	padding:0;
	margin:0;
	visibility:hidden;
	}
	
	
#menu span ul li a{
color:#352f2e;
width:150px;
padding-left:2px;
visibility:visible;
}

#menu span ul li a:hover{
color:#666;
width:148px;
padding-left:2px;}