ayuda con un menu horizontal desplegable

[jeronimus]

hola. he realizado solo con css un menu desplegable horizontal que en el primer nivel carga imagenes con rollover y en el segundo nivel listas de textos verticales como enlaces, en mozilla se ve perfecto pero tengo diferentes problemas en cada una de las versiones de internet explorer, por ejemplo en ie 6 no se ve el submenu y en ie8 se ve pero desplaza el div que esta inmediatamente debajo de el y tampoco muestra los textos del li. he mirado muchos ejemplos en google pero no he logrado resolver este inconveniente, les agradeceria su ayuda.

codigo html

Código HTML:

<div id="fondo_barra">
  <div id="alineacion_menu">
    <div id="menu">
      <ul>
        <li class="imagen_dere_menu"></li>
        <li class="boton1"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul class="estado_dos">
            <li><a href="#">Conózcanos</a></li>
            <li><a href="#">Infraestructura</a></li>
            <li><a href="#">Metodología</a></li>
            <li><a href="#">Nuestros Clientes</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>
      <ul>
        <li class="boton2"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul class="estado_dos">
            <li><a href="#">Desarrollo Web</a></li>
            <li><a href="#">Mantenimiento</a></li>
            <li><a href="#">Hosting y Dominio</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>
      <ul>
        <li class="boton3"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul class="estado_dos">
            <li><a href="#">Portales Aliados</a></li>
            <li><a href="#">Redes Sociales</a></li>
            <li><a href="#">Google</a></li>
            <li><a href="#">Mobile Marketing</a></li>
            <li><a href="#">Email Marketing</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul> 
      <ul>
        <li class="boton4"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul class="estado_dos">
            <li><a href="#">Descargas</a></li>
            <li><a href="#">Bote Corriente</a></li>
            <li><a href="#">Novedades</a></li>
            <li><a href="#">Para clientes</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
      </ul>
      <ul>
        <li class="boton5"><a href="#"><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
          <ul class="estado_dos">
            <li><a href="#">Sugerencias</a></li>
            <li><a href="#">Reclamos</a></li>
          </ul>
          <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li class="imagen_izq_menu"></li>
      </ul>                 
    </div>
  </div>
</div> 

codigo css

Código HTML:

#fondo_barra {
	background-image: url(images/fondo_menu.jpg);
	background-repeat: repeat-x;
	height: 40px;
	width: 100%;
	text-align:center;
}
#alineacion_menu {
	margin: auto;
	width: 873px;
	height: 40px;
}

/*parametros generales del menu*/

#menu ul {
	list-style-type:none;
	padding:0;
	margin:0;
	height:40px;
	display: inline;
}

#menu li{
	float:left;
	position:relative;
	z-index:100;
	margin:0px;
}

.menu table{
	position:absolute;
	border-collapse:collapse;
	z-index:80;
	left:0px;
	top:40px;
}

#menu a, #menu :visited {
	display: block;
	font-size: 13px;
	font-family:"Trebuchet MS";
	height: 20px;
	padding: 10px 0px;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
}

#menu :hover{
	color: #FFFFFF;
	text-decoration: underline;
}

/*submenu*/

#menu ul ul {
	visibility:hidden;
	position:absolute;
	width: 100%;
	left: 0px;
	height:0;
	top:40px;
	background: #2F3739;
}
#menu ul li ul li{
	background: #2F3739;
	width: 100%;
	border-top:#CCCCCC solid 1px;
}

#menu ul li:hover ul,
#menu ul a:hover ul{
	visibility:visible;
	background: #2F3739;
}

/*estado over del submenu*/

.estado_dos a{
	background: #2F3739;
}
.estado_dos a:hover{
	background: #2F3739;
}

/*cada boton del submenu*/

.imagen_dere_menu {
	background-image: url(images/imagen_barramenu1.jpg);
	background-repeat: no-repeat;
	width: 142px;
	height: 40px;	
}

.boton1  {
	background-image: url(images/menu1.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 40px;
	width: 118px;
}

.boton1 :hover {
	background-image: url(images/menu1b.jpg);
	background-repeat: no-repeat;
}

.boton2 {
	background-image: url(images/menu2.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 40px;
	width: 132px;
}

.boton2 :hover {
	background-image: url(images/menu2b.jpg);
	background-repeat: no-repeat;
}

.boton3 {
	background-image: url(images/menu3.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 40px;
	width: 141px;
}

.boton3 :hover {
	background-image: url(images/menu3b.jpg);
	background-repeat: no-repeat;
}

.boton4 {
	background-image: url(images/menu4.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 40px;
	width: 95px;
}

.boton4 :hover {
	background-image: url(images/menu4b.jpg);
	background-repeat: no-repeat;
}

.boton5 {
	background-image: url(images/menu5.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 40px;
	width: 103px;
}

.boton5 :hover  {
	background-image: url(images/menu5b.jpg);
	background-repeat: no-repeat;
}

.imagen_izq_menu {
	background-image: url(images/imagen_barramenu2.jpg);
	background-repeat: no-repeat;
	width: 142px;
	height:40px;
}