Foros del Web » Creando para Internet » CSS »

Despliegue de Menu en forma vertical

Estas en el tema de Despliegue de Menu en forma vertical en el foro de CSS en Foros del Web. Amigos buenas tardes necesito de su ayuda, tengo un menu en css desplegable vertical, el despliegue de las opciones es de forma vertical, el problema ...
  #1 (permalink)  
Antiguo 08/06/2009, 16:36
 
Fecha de Ingreso: junio-2009
Mensajes: 5
Antigüedad: 8 años, 6 meses
Puntos: 0
Despliegue de Menu en forma vertical

Amigos buenas tardes necesito de su ayuda, tengo un menu en css desplegable vertical, el despliegue de las opciones es de forma vertical, el problema es que quisiera que la parte principal quedara expandida al momento de cargar la pagina, y no como lo hace actualmente con la propiedad hover, aqui esta el codigo:

CSS:
#info {height:400px; position:relative;}
#menuOuter {padding:0 0 10px 0; margin:0; list-style:none; width:201px; background: #000 url(rad2.png) no-repeat left bottom; position:absolute; z-index:500; left:10px; font-family:arial, sans-serif;}
#menuOuter li#menu1 {float:left; width:201px;}
#menuOuter table {border-collapse:collapse; padding:0; margin:0; width:0; height:0; margin:-1px -4px -1px -4px;}
#menuOuter li#menu1 a#menuLink {display:block; padding:10px 0 0 0; margin:0; background:url(rad3.png) no-repeat left top; height:18px; width:201px; text-align:center; font-size:12px; font-family:arial, sans-serif; color:#fff; font-weight:bold; text-decoration:none;}
#menuOuter ul {position:absolute; left:0; top:0; padding:0; margin:0; list-style:none; height:0; overflow:hidden;}

#menuOuter li#menu1 a#menuLink:hover {border:0; color:#fc6;}
#menuOuter :hover ul{
position:relative; top:0;
height:auto; overflow:visible;
padding:0 10px; margin:0;
list-style:none; width:181px;
}

#menuOuter :hover ul ul {position:absolute; top:67px; height:0; overflow:hidden;}

#menuOuter :hover ul li a {display:block; padding:0; margin:0; width:181px; height:37px; background:url(dl-slide3/back3.png) no-repeat left top; color:#ddd; text-align:center; line-height:37px; cursor:pointer; font-weight:bold; text-decoration:none;}

#menuOuter :hover ul :hover {background-position:left -37px;}
#menuOuter :hover ul li:hover > a {background-position:left -37px;}

#menuOuter :hover ul li {float:left;}

#menuOuter :hover ul :hover ul {position:relative; height:156px; overflow:visible; width:181px; padding:0; margin:0; background:#eee url(dl-slide3/shade.png) no-repeat top left; text-align:center; width:181px; top:0; cursor:default;}
#menuOuter :hover ul :hover ul li a {background:transparent; height:25px; line-height:25px; color:#666; border-bottom:1px solid #aaa; font-weight:normal; font-size:11px;}
#menuOuter :hover ul :hover ul li a:hover {color:#000;}
div#background {width:700px; height:465px; background:url(black.jpg);}


HTML:
<div id="info">
<ul id="menuOuter">
<li id="menu1"><a id="menuLink" href="#">MENU SETI<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#link">HOME</a></li>

<li><a href="#link">PRIVACY POLICY</a></li>
<li><a href="#url">SALES<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Digital SLR Cameras</a></li>
<li><a href="#nogo">Interchangeable Lenses</a></li>
<li><a href="#nogo">Flash Guns and Accessories</a></li>
<li><a href="#nogo">Professional Tripods</a></li>
<li><a href="#nogo">Filters &amp; Lens Hoods</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">SERVICES<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Printing &amp; Framing</a></li>
<li><a href="#nogo">Photo Editing</a></li>
<li><a href="#nogo">Storage &amp; Backup</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">CONTACTS<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Support</a></li>
<li><a href="#nogo">Sales</a></li>

<li><a href="#nogo">Buying</a></li>
<li><a href="#nogo">Photographers</a></li>
<li><a href="#nogo">Stockist</a></li>
<li><a href="#nogo">General</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="#url">STORES LOCATION<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South West Region</a></li>
<li><a href="#nogo">North East Region</a></li>
<li><a href="#nogo">Central Region</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">CONTACT US<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Email Addresses</a></li>
<li><a href="#nogo">By Post</a></li>

<li><a href="#nogo">Telephone Numbers</a></li>
<li><a href="#nogo">Facsimile</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div> <!-- end of info -->
  #2 (permalink)  
Antiguo 09/06/2009, 02:24
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Despliegue de Menu en forma vertical

Saludos!!

Mira, realmente debo disculparme por no leer tu codigo, pero te aconsejo que busques algun menu ya hecho y solo lo adaptes a tu web. Te recomiendo esta pagina hecha por Mikel que tiene varios ejemplos hechos exactamente para copiar, entender y adaptar a tu web.

La pagina es: http://araudi.net Espero que te sirva!!

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 09/06/2009, 04:02
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Despliegue de Menu en forma vertical

Además del buen aporte de CaLiZzZ, te aconsejo que te mires este tutorial de Cristalab, para entender mejor como hacer menús con CSS

http://www.cristalab.com/tutoriales/...-listas-c130l/
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 11/06/2009, 09:50
 
Fecha de Ingreso: junio-2009
Mensajes: 5
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Despliegue de Menu en forma vertical

Mucha Gracias Amigos
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 09:22.