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;}

[kseso?]

Hola Irulan (de nuevo )
Antes de seguir con tu código, mejor te comento unos detalles/errores que contiene:
---> Un span no puede contener una lista dentro <span><ul>...</ul></span>
---> Todo lo que esté dentro de una lista (ul) tiene que estar metido en su correspondiente <li>, así sí: <ul><li> todo lo que quieras</li></ul>. Así no: <ul><algo_que_no_sea_li></ul>

Te pongo unos enlaces de diversos tipos de acordeones:
varios juntos
otro
Recopilación de unos cuantos (algo más que css)
otra recopilación

EDITO para ampliar:
Uno que me encanta
Pero en esa página (www.csplay.co.uk) tienes para pasar una tarde entera viendo ejemplos:
unos cuantos más ya sean sólo con css o con algún script, lo que los dota de mayores efectos

Sírvete y ya veremos tu elección
Un saludo

[IruLaN]

kseso muchas gracias!

No sabía estas cositas que me has explicado. Mañana intentaré probar algo nuevo. Saludos!!!

[IruLaN]

Muchas gracias, ya he podido realizar mi menu, a partir de uno de los enlaces que me dejaste.

Te estoy muy agradecida, me encanta aprender y vosotros sois un gran libro!!!

Un saludo enorme!!!!!

[kseso?]

Todo un placer, Irulan.
¿soy un libro? Bueno, mientras no sea el "libro gordo de Petete"

Un saludo

[Pic]

¿Cuál es el mejor programa editor?