agragar menu css

[erick_perez]

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:

<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 ????

[AlbertoGarcia]

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!

[kseso?]

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

[erick_perez]

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

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

[erick_perez]

Y el codigo css:

/*------------------------------------------------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--------------------*/

[kseso?]

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:

<ul>
      <li><a href="#"> Item 1</a>
            <ul>
                    <li><a href="#"> Item 1.1</a>
                    <li><a href="#"> Item 1.2</a>
            </ul>
      </li>
</ul>
 

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

Un saludo