Foros del Web » Creando para Internet » CSS »

agragar menu css

Estas en el tema de agragar menu css en el foro de CSS en Foros del Web. que tal..de nuevo dando lata!! bueno ahora lo que quiero hacer es lo siguiente: tengo un menu en un div...un menu simple, quiero hacer que ...
  #1 (permalink)  
Antiguo 30/09/2009, 11:49
 
Fecha de Ingreso: agosto-2009
Mensajes: 95
Antigüedad: 8 años, 3 meses
Puntos: 0
agragar menu css

que tal..de nuevo dando lata!! bueno ahora lo que quiero hacer es lo siguiente:

tengo un menu en un div...un menu simple, quiero hacer que cuando le den clic en un boton este desgloce una lista de sub menus el codigo de mi div es este:
Cita:
<div align="left"><a href="#" class="hover">Inicio</a></div>
</li>
<li><a href="construccion.html">Nosotros</a></li>
<li><a href="construccion.html">Xpos</a></li>
<li><a href="construccion.html">Pais</a></li>
<li><a href="construccion.html">Bussines Center</a></li>
<li> <a href="#">Conferencias</a></li>
<li><a href="estand.html">Stands</a></li>
<li><a href="construccion.html">Franquicias</a></li>
<li><a href="construccion.html">Contacto</a></li>
<li><a href="construccion.html">Distribuidores</a></li>
<li><a href="terminos.html">Terminos de uso</a></li>
<li><a href="#"></a></li>
</ul>
</div>
he intentado agragar mas div dentro, he intentado agragar tablas y nada...en donde me estoy equivocando parece ser en los eventos del mouse....alguna sugerencia ????
  #2 (permalink)  
Antiguo 30/09/2009, 12:08
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: agragar menu css

Justo aquí en el foro un colaborador colgó unos ejemplos de menús desplegables con css, y en Google tienes más ejemplos.

Sin ver el resto del código que estás usando (js y/o css) dificil ayudarte más.

Salud!
  #3 (permalink)  
Antiguo 30/09/2009, 12:09
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: agragar menu css

En las faq´s de css tienes una amplia colección de menús.
Presta atención especial a los publicados por Mikmoro.
Elije aquel que mejor se adapte a lo que necesitas y si te surge algún problema a la hora de acomodarlo, comenta.

Un saludo

Edito: Estos golpes a estas alturas ya duelen
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 01/10/2009, 11:08
 
Fecha de Ingreso: agosto-2009
Mensajes: 95
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: agragar menu css

saludos!! desde el dia de ayer hasta hoy...no logro que funcione el menu, tengo el sigueiente codigo en html :

Cita:
<div id="header">
<ul>
<li>
<div align="left"><a href="#" class="hover">Inicio</a></div>
</li>
<li><a href="construccion.html" class="menu">Nosotros</a></li>
<li><a href="construccion.html">Xpos</a></li>
<li><a href="construccion.html">Pais</a></li>
<li><a href="construccion.html">Bussines Center</a></li>
<li> <a href="construccion.html">Conferencias</a></li>
<li><a href="estand.html">Stands</a></li>
<li><a href="construccion.html">Franquicias</a></li>
<li><a href="construccion.html">Contacto</a></li>
<li><a href="construccion.html">Distribuidores</a></li>
<li><a href="terminos.html">Terminos de uso</a></li>
</li>
</ul>
</div>
  #5 (permalink)  
Antiguo 01/10/2009, 11:13
 
Fecha de Ingreso: agosto-2009
Mensajes: 95
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: agragar menu css

Y el codigo css:

Cita:

/*------------------------------------------------header--------------------*/
#header{
width:981px;
height:380px;
position:relative;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-repeat: no-repeat;
background-position: 0 0;
background-image: url(images/edificio_oficial.jpg);
}
#header ul{
width:943px;
height:29px;
position:absolute;
left:9px;
top:-15px;
float: none;
padding-top: 0;
padding-right: 5px;
padding-bottom: 0;
padding-left: 15px;
background-image: url(images/nav_bar.gif);
background-repeat: repeat-x;
background-position: 0 0;
}
#header ul li{
background:url(images/nav_div.gif) right top no-repeat;
height:27px;
float:left;
padding:0 1px 0 0;
}
#header ul li a{
display:block;
background:url(images/nav_bg.gif) 0 0 repeat-x;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
color:#344A04;
background-color:inherit;
text-decoration:none;
}
#header ul li a:hover{
background:url(images/nav_hover.gif) 0 0 repeat-x;
color:#fff;
background-color: #FFFFFF;
}
#header ul li a.hover{
display:block;
background:url(images/nav_hover.gif) 0 0 repeat-x;
color:#fff;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
background-color:inherit;
text-decoration:none;
cursor:text;
}
#header ul li.last{
background-image:none;
height:27px;
float:left;
}
#header img.logo{
position:absolute;
left:40px;
top:98px;
width:249px;
height:72px;
}
#header h1{
background:url(images/slogan.gif) 0 0 no-repeat;
width:484px;
height:32px;
position:absolute;
left:411px;
top:108px;
text-indent:-10000px;
}
#header p{
font:normal 12px/19px Arial, Helvetica, sans-serif;
color:#fff;
background-color:inherit;
position:absolute;
left:411px;
top:142px;
}
#header p span.txt1{
color:#fff;
background-color:#1E6887;
}
#header img.icon{
position:absolute;
left:60px;
top:190px;
width:174px;
height:80px;
}
#header p.topText{
font:normal 18px/23px Arial, Helvetica, sans-serif;
color:#E8E8E8;
background-color:inherit;
position:absolute;
left:285px;
top:203px;
width:588px;
}
#header p.topText span.smallTxt{
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#FF9C3A;
background-color:inherit;
padding:0 0 0 8px;
}
#header a.readMore{
display:block;
background:url(images/read_more.gif) 0 0 no-repeat;
width:50px;
height:38px;
position:absolute;
left:895px;
top:203px;
}
#header a.readMore:hover{
background:url(images/read_more_hover.gif) 0 0 no-repeat;
}



/*------------------------------------------------header--------------------*/

/*------------------------------------------------body--------------------*/
#body{
width:980px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 10px;
padding-right: 1px;
padding-bottom: 5px;
padding-left: 2px;
}
/*------------------------------------------------left--------------------*/
#left{
width:357px;
float:left;
}
#left1{
width:324px;
background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
border:#DDDDCA solid 7px;
margin:0 0 4px 0;
padding:5px 10px 6px 9px;
color:#878767;
}
#left1 p.pic1{
display:block;
background:url(images/lft_pic1.gif) 0 0 no-repeat;
width:88px;
height:78px;
margin:5px 0 0 0;
float:left;
}
#left1 p.boxTxt1{
float:right;
padding:0 0 0 15px;
border-left:#F9F9F1 solid 2px;
font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
width:199px;
}
#left1 p.boxTxt1 span{
font:normal 19px/17px Arial, Helvetica, sans-serif;
color:#D76E08;
background-color:inherit;
padding:0 0 0 25px;
margin:0 0 10px 0;
background:url(images/one.gif) 0 0 no-repeat;
height:17px;
display:block;
}
#left2{
width:316px;
background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
border:#DDDDCA solid 7px;
margin:0 0 4px 0;
padding:5px 10px 6px 17px;
color:#878767;
}
#left2 p.pic2{
display:block;
background:url(images/lft_pic2.gif) 0 0 no-repeat;
width:74px;
height:74px;
margin:8px 0 0 0;
float:left;
}
#left2 p.boxTxt2{
float:right;
padding:0 0 0 15px;
border-left:#F9F9F1 solid 2px;
font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
width:199px;
}
#left2 p.boxTxt2 span{
font:normal 19px/17px Arial, Helvetica, sans-serif;
color:#D76E08;
background-color:inherit;
padding:0 0 0 25px;
margin:0 0 10px 0;
background:url(images/two.gif) 0 0 no-repeat;
height:17px;
display:block;
}
#left3{
width:324px;
background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
border:#DDDDCA solid 7px;
margin:0;
padding:5px 10px 6px 9px;
color:#878767;
}
#left3 p.pic3{
display:block;
background:url(images/lft_pic3.gif) 0 0 no-repeat;
width:94px;
height:71px;
margin:5px 0 0 0;
float:left;
}
#left3 p.boxTxt3{
float:right;
padding:0 0 0 15px;
border-left:#F9F9F1 solid 2px;
font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
width:199px;
}
#left3 p.boxTxt3 span{
font:normal 19px/17px Arial, Helvetica, sans-serif;
color:#D76E08;
background-color:inherit;
padding:0 0 0 25px;
margin:0 0 10px 0;
background:url(images/three.gif) 0 0 no-repeat;
height:17px;
display:block;
}

#left ul li:hover ul {
display: block;
}
/*------------------------------------------------left--------------------*/
  #6 (permalink)  
Antiguo 01/10/2009, 11:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: agragar menu css

Veo que no te has molestado ni en pasar por las faq's ni por el enlace que te puso Alberto. Hazlo que ahí encontrarás muy bien explicado el cómo hacerlo y que sea compatible con todos los navegadores (incluido ie6).
Si lo hubieses hecho, al menos habrías visto la sintaxis para las opciones:
Código html:
Ver original
  1. <ul>
  2.       <li><a href="#"> Item 1</a>
  3.             <ul>
  4.                     <li><a href="#"> Item 1.1</a>
  5.                     <li><a href="#"> Item 1.2</a>
  6.             </ul>
  7.       </li>
  8. </ul>

Hay que prestar algo más de atención a la ayuda/sugerencias que te dan.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 05:31.