Volver al Foro de Diseño de páginas Web

CSS menú desplegable horizontal ayuda por favor

  • eventbyclaire
  • Born
  • Born
  • No Avatar
  • Registrado: Oct 20, 2009
  • Mensajes: 2
  • Status: Offline

Nota Octubre 20th, 2009, 8:45 pm

Ive estado luchando con esto durante un rato ahora. He creado una gota horizontal menú desplegable con un efecto de vuelco del vehículo. Funciona bien en Firefox, pero no puedo hacerlo funcionar en IE. Sólo puedo acceder a la primera opción en el submenú. ¿alguien sabe de una solución a esto?

por favor, busque código de abajo:
Código: [ Download ] [ Select ]
html

<ul id="navlist">
                <li id="active"><a href="index.html" id="current">home</a></li>
                <li><a href="pages/projects.html">projects</a>
                    <ul id="subnavlist">
                    <li><a href="pages/projects/residential.html">residential</a></li>
                    <li><a href="pages/projects/commercial.html">commercial</a></li>
                    <li><a href="pages/projects/interiors.html">interiors</a></li>
                    <li><a href="pages/projects/clubs.html">clubs</a></li>
                
                    </ul>
                </li>
                
                <li><a href="pages/people.html">people</a></li>
                <li><a href="pages/montages.html">montages</a></li>
                <li><a href="pages/contact.html">contact</a></li>
            </ul>
  1. html
  3. <ul id="navlist">
  4.                 <li id="active"><a href="index.html" id="current">home</a></li>
  5.                 <li><a href="pages/projects.html">projects</a>
  6.                     <ul id="subnavlist">
  7.                     <li><a href="pages/projects/residential.html">residential</a></li>
  8.                     <li><a href="pages/projects/commercial.html">commercial</a></li>
  9.                     <li><a href="pages/projects/interiors.html">interiors</a></li>
  10.                     <li><a href="pages/projects/clubs.html">clubs</a></li>
  11.                 
  12.                     </ul>
  13.                 </li>
  14.                 
  15.                 <li><a href="pages/people.html">people</a></li>
  16.                 <li><a href="pages/montages.html">montages</a></li>
  17.                 <li><a href="pages/contact.html">contact</a></li>
  18.             </ul>
CSS
Código: [ Download ] [ Select ]
#navlist, #navlist ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#navlist a {
    display: block;
    width: 120px;
}

#navlist li {
    float: left;
    width: 120px;
}
#navlist ul li
{
    position: relative;
}
#navlist li ul {
    position: absolute;
    width: 120px;
    left: -999em;
}

#navlist li:hover ul {
    left: auto;
}
#navlist li:hover ul, #navlist li.sfhover ul {
    left: auto;
}

/* add */

#menubar
{
height: 4.7em;
}
#navlist
{
    position: relative;
    width: 100%;
    height: 1.5em;
    margin: 0;
    white-space: nowrap;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #333333;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 6;
    padding-left: 0;

}

#navlist ul li
{
    position: relative;
}
#navlist li ul
{
    position: absolute;
    display:none
}

#navlist li:hover ul, #navlist li.over ul {
display: block;
}

#navlist li
{
    float: left;
    list-style-type: none;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0px;
}

#navlist li a
{
position: relative;
width: 6em;
display: block;
margin: 0;
color: #808080;
font-size: 12px;
text-align: left;
text-decoration: none;
}

#navlist li a:hover
{
color: #000000;
}

#navlist li#active a
{
    color: #808080;
    font-size: 12px;
}

#navlist li#active a:hover { color: #000000; }

#navlist ul#subnavlist
{
    position: absolute;
    height: 20px;
    width: 600px;
    padding-top: 5px;
    }
  1. #navlist, #navlist ul {
  2.     padding: 0;
  3.     margin: 0;
  4.     list-style: none;
  5. }
  7. #navlist a {
  8.     display: block;
  9.     width: 120px;
  10. }
  12. #navlist li {
  13.     float: left;
  14.     width: 120px;
  15. }
  16. #navlist ul li
  17. {
  18.     position: relative;
  19. }
  20. #navlist li ul {
  21.     position: absolute;
  22.     width: 120px;
  23.     left: -999em;
  24. }
  26. #navlist li:hover ul {
  27.     left: auto;
  28. }
  29. #navlist li:hover ul, #navlist li.sfhover ul {
  30.     left: auto;
  31. }
  33. /* add */
  35. #menubar
  36. {
  37. height: 4.7em;
  38. }
  39. #navlist
  40. {
  41.     position: relative;
  42.     width: 100%;
  43.     height: 1.5em;
  44.     margin: 0;
  45.     white-space: nowrap;
  46.     border-bottom-width: 1px;
  47.     border-bottom-style: solid;
  48.     border-bottom-color: #333333;
  49.     padding-top: 0;
  50.     padding-right: 0;
  51.     padding-bottom: 6;
  52.     padding-left: 0;
  54. }
  56. #navlist ul li
  57. {
  58.     position: relative;
  59. }
  60. #navlist li ul
  61. {
  62.     position: absolute;
  63.     display:none
  64. }
  66. #navlist li:hover ul, #navlist li.over ul {
  67. display: block;
  68. }
  70. #navlist li
  71. {
  72.     float: left;
  73.     list-style-type: none;
  74.     margin-top: 0;
  75.     margin-right: 0;
  76.     margin-bottom: 0;
  77.     margin-left: 0px;
  78. }
  80. #navlist li a
  81. {
  82. position: relative;
  83. width: 6em;
  84. display: block;
  85. margin: 0;
  86. color: #808080;
  87. font-size: 12px;
  88. text-align: left;
  89. text-decoration: none;
  90. }
  92. #navlist li a:hover
  93. {
  94. color: #000000;
  95. }
  97. #navlist li#active a
  98. {
  99.     color: #808080;
  100.     font-size: 12px;
  101. }
  103. #navlist li#active a:hover { color: #000000; }
  105. #navlist ul#subnavlist
  106. {
  107.     position: absolute;
  108.     height: 20px;
  109.     width: 600px;
  110.     padding-top: 5px;
  111.     }
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Octubre 20th, 2009, 8:45 pm

  • Rika
  • Newbie
  • Newbie
  • No Avatar
  • Registrado: Oct 14, 2009
  • Mensajes: 11
  • Loc: Singapore
  • Status: Offline

Nota Octubre 25th, 2009, 5:12 am

Yo no tengo una solución a esto. pero tal vez puede intentar u purecssmenu DOT com, generar uno que es el mismo que el suyo y tal vez u será capaz de obtener el suyo de trabajo
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de Usuario
  • Registrado: Jul 11, 2005
  • Mensajes: 1597
  • Loc: Minneapolis, MN
  • Status: Offline

Nota Octubre 26th, 2009, 6:33 pm

¿Qué versión de Internet Explorer está usando? IE6 no reconoce: hover en cualquier otra cosa que una etiqueta de ancla. usted tendrá que utilizar javascript en lugar
//// Designer, Art Director, Developer & Teacher of Interactive, Motion and 3D \\\\
WhenImNotSleeping.com

Nota Noviembre 8th, 2009, 4:06 pm

Java script Uso / CSS y un poco de google :)
  • eventbyclaire
  • Born
  • Born
  • No Avatar
  • Registrado: Oct 20, 2009
  • Mensajes: 2
  • Status: Offline

Nota Noviembre 8th, 2009, 9:38 pm

Gracias,

hice terminan usando javascript.

Nota Noviembre 9th, 2009, 9:16 am

Gran :)

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 6 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 237 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© Unmelted Enterprises 1998-2009. Impulsado por phpBB © 2001-2009 phpBB Group.