Foros del Web » Creando para Internet » CSS »

Menu despegable CSS

Estas en el tema de Menu despegable CSS en el foro de CSS en Foros del Web. Hola, tengo el siguiente menu css: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #menu ul { padding : 0px ; margin : 0px ; background : ...
  #1 (permalink)  
Antiguo 29/04/2010, 08:49
Avatar de Tecktonikrazy  
Fecha de Ingreso: enero-2010
Mensajes: 224
Antigüedad: 7 años, 11 meses
Puntos: 3
Menu despegable CSS

Hola, tengo el siguiente menu css:

Código CSS:
Ver original
  1. #menu ul {
  2. padding: 0px;
  3. margin: 0px;
  4. background: url(imagen.jpg) repeat-x;
  5. font-size: 14px;
  6. font-weight: bold;
  7. width: 100%;
  8. float: left;
  9. font-family:"Trebuchet MS", Tahoma, Verdana, Helvetica, Arial;
  10. }
  11.  
  12.  
  13. #menu ul li {
  14. display: inline;
  15. }
  16.  
  17. #menu ul li a:link, #menu ul li a:visited {
  18. background: url(imagen.jpg) left top
  19.  
  20. no-repeat;
  21. color: #FFF;
  22. padding-left:50px;
  23. float: left;
  24. text-decoration: none;
  25. display:block;
  26. margin:0 0px;
  27. }
  28.  
  29. #menu ul li a span{
  30. padding:10px 50px 10px 0;
  31. line-height:24px;
  32. display:block;
  33. background: url(imagen.jpg) right top
  34.  
  35. no-repeat;
  36. }
  37.  
  38. #menu ul li a:hover, #menu ul li a:active{
  39. color: #FFF;
  40. background: url(imagen.jpg) left bottom
  41.  
  42. no-repeat;
  43. }
  44.  
  45. #menu ul li a:hover span, #menu ul li a:active span{
  46. background: url(imagen.jpg) right bottom
  47.  
  48. no-repeat;
  49. }

Eso va en el Head, y cada vez que quiero poner un nuevo enlace con ese menu utilizo:

Código HTML:
<div id="menu">
            <ul>
                <li>
                    <a href="/home"><span>HOME</span></a>
                </li>

                <li>
                    <a href="/news"><span>NEWS</span></a>
                </li>

                <li>
                    <a href="/imagenes"><span>IMAGENES</span></a>
                </li>
            </ul>
        </div> 
Funciona a la perfeccion, pero lo que quiro saber es como hago para que al pasar el mouse por el de "IMAGENES" por ejemplo, aparesca un submenu despegable vertical con subpaginas o categorias, no quiero ningun efecto al desplegarse ni nada, solo lo mas basico y poderle cambiar el color de fondo, no se nada de css, ese menu lo saque de un tutorial xD bueno espero que me puedan ayudar
  #2 (permalink)  
Antiguo 29/04/2010, 09:22
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Menu despegable CSS

aqui tienes ejemplos de menus desplegables...
  #3 (permalink)  
Antiguo 29/04/2010, 09:23
Avatar de fprieto  
Fecha de Ingreso: diciembre-2008
Mensajes: 14
Antigüedad: 9 años
Puntos: 0
Respuesta: Menu despegable CSS

Que mas men esta pagina siempre me ha servido mucho a la hora de hacer mis menus desplegables ahi le explican como hacerlo ok y ese menu desplegable es facil de usar y tiene subopciones.

http://www.chuidiang.com/css/ejemplos/menu_desplegable_css.php

algo que le recomiento en caso de que no le funcione en IE es poner lo siguiente antes de la etiqueta <html> del index o de la pagina donde valla a hacer su menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

y su eqtiqueta <html> reemplacela por esto:
<html xmlns="http://www.w3.org/1999/xhtml">


[URL="http://www.laestacionmusic.com"]Escucha[/URL] la mejor [URL="http://www.laestacionmusic.com"]Musica [/URL]en [URL="http://www.laestacionmusic.com"]Internet[/URL]
  #4 (permalink)  
Antiguo 30/04/2010, 20:11
 
Fecha de Ingreso: abril-2010
Mensajes: 4
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu despegable CSS

Cita:
Iniciado por alexk Ver Mensaje
aqui tienes [URL="http://www.araudi.net/ejemplos/menus_desplegables_CSS.html"]ejemplos de menus desplegables[/URL]...
Tengo una pregunta, se podrian insertar imagenes a la perfeccion en ese tipo de menus?¿ osea con imagen de sustitucion y todo?¿ Lo he probado de todo tipo y nunca queda perfecto. Gracias
  #5 (permalink)  
Antiguo 30/04/2010, 20:31
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Menu despegable CSS

claro... no hay problema... si quieres mas ejemplos pasa por las FAQS... de este mismo foro
  #6 (permalink)  
Antiguo 01/05/2010, 22:40
 
Fecha de Ingreso: septiembre-2008
Mensajes: 138
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Menu despegable CSS

Muy bueno, se agradece el enlace.

Etiquetas: Ninguno
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 11:57.