Foros del Web » Creando para Internet » CSS »

ayuda con un menu horizontal desplegable

Estas en el tema de ayuda con un menu horizontal desplegable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/04/2009, 12:15
 
Fecha de Ingreso: abril-2009
Ubicación: cali valle
Mensajes: 3
Antigüedad: 8 años, 8 meses
Puntos: 0
De acuerdo ayuda con un menu horizontal desplegable

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

Última edición por jeronimus; 01/04/2009 a las 12:24 Razón: agregar info
  #2 (permalink)  
Antiguo 01/04/2009, 12:42
 
Fecha de Ingreso: noviembre-2008
Ubicación: W2.0
Mensajes: 103
Antigüedad: 9 años
Puntos: 1
Respuesta: ayuda con un menu horizontal desplegable

Cita:
<div id="marco">
<span class="preload2"></span>

<ul class="menu2">

<li class="top" ><a href="#" id="Hotel" class="top_link"><span class="down" >BOTON</span></a>

<ul class="sub">
<li><a href="#" class="fly">SUBOTON</a>

<ul>
<li><a href="#">PRODUCTO</a></li>
</ul>
</li>
</ul>


</div>


Luego este sería el css


Cita:
#marco {
width:890px;
padding:0px;
text-align:left;
margin: 0px auto 0px auto !important;
color: #000000!important;
}


.preload2
{
background-color: transparent!important;

}
.menu2
{
color: #000000!important;
padding: 0px 0px 0px 0px !important;
margin: 0px 0px 0px 0px !important;
list-style:none;
height:25px;
background-color: #Ffffff!important;
position:relative;
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
font-size: 12px !important;
font-weight: bold;

}
.menu2 li.top
{
display:block;
float:left;
position:relative;
color: #3333333!important;
font-size: 12px !important;
font-weight: bold;
height:25px !important;
border-left: 1px solid transparent;
border-right: 1px solid #CCC;
margin: 0px 0px 0px 0px !important;
width:176px;
}
.menu2 li a.top_link
{
display:block;
text-align:center!important;
float:left;
height:25px;
margin-left:6px;
line-height:25px;
color:#000000!important;
text-decoration:none;
padding:0 0 0 6px !important;
cursor:pointer;
background-color: #ffffff;
font-size: 12px !important;
font-weight: bold;
height: 25px !important;
margin: 0px 0px 0px 0px !important;
}
.menu2 li a.top_link span
{
float:left;
text-align:center!important;
display:block;
padding:0 10px 0 6px;
height:40px;
color:#000000!important;
width:164px;
}
.menu2 li a.top_link span.down
{
float:left;
text-align:center!important;
display:block;
padding:0 10px 0 16px;
height:25px;
color:#000000!important;

}
.menu2 li a.top_link:hover
{
color:#000000!important;
text-align:center!important;
width:164px;
border-left: 2px solid #BA3E00;
border-right: 2px solid #BA3E00;
}
.menu2 li a.top_link:hover span
{
background-color: #ffffff!important;
}
.menu2 li a.top_link:hover span.down
{
background-color:#ffffff!important;
}

.menu2 li:hover > a.top_link
{
color:#000000!important;
}
.menu2 li:hover > a.top_link span
{
background-color: #ffffff!important;
}
.menu2 li:hover > a.top_link span.down
{
background-color: #ffffff!important;
}
.menu2 table
{
border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:10;
}
.menu2 a:hover
{
visibility:visible!important;
}
.menu2 li:hover
{
position:relative!important;
z-index:200!important;
}
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul
{
position:absolute!important;
left:-9999px; top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;

}

.menu2 :hover ul.sub
{
left:1px!important;
top:25px;
background-color: #ffffff!important;
padding:0;
width:auto;
height:auto;
font-weight:normal;
background-color:transparent!important;
}
.menu2 :hover ul.sub li
{
display:block;
position:relative;
background-color:#ffffff!important;
float:left;
width:160px;
border-bottom:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
margin-bottom:0;
}
.menu2 :hover ul.sub li a
{
display:block;
height:auto;
font-size:12px;
font-weight:bold;
padding:4px 3px 4px 10px!important;
color:#000000!important;
text-decoration:none;
}
.menu2 :hover ul.sub li a.fly
{
background:#ffffff url(../images/vineta_menu.gif) no-repeat 150px 6px!important;
}
.menu2 :hover ul.sub li a:hover
{
background:#933000!important;
color:#ffffff!important;
}
.menu2 :hover ul.sub li a.fly:hover
{
background:#933000 url(../images/vineta_menu2.gif) no-repeat 150px 6px!important;
}
.menu2 :hover ul li:hover > a.fly
{
background:#ffffff!important;
}
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{
left:160px;
top:1px;
background-color: #ffffff!important;
padding:0;
width:auto;
z-index:100;
height:auto;

}
.menu2 :hover ul.sub li ul
{
border-top:1px solid #cccccc!important;
background-color: #ffffff!important;
z-index:100;
}
espero que te sirva... compáralo y listo.
Si deseas meter mas botones o subbotones manu¡ipulas los <li> y <ul>
  #3 (permalink)  
Antiguo 01/04/2009, 14:57
 
Fecha de Ingreso: abril-2009
Ubicación: cali valle
Mensajes: 3
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: ayuda con un menu horizontal desplegable

muchas gracias!, voy a probarlo en este instante.
  #4 (permalink)  
Antiguo 01/04/2009, 15:08
 
Fecha de Ingreso: abril-2009
Ubicación: cali valle
Mensajes: 3
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: ayuda con un menu horizontal desplegable

hola ya lo probe y no me funciono en ie6 de resto bien, muchas gracias.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:27.