[SOLUCIONADO] Error de menu con css

jhonnymontoya · #1 (**permalink**) 28/10/2013, 19:48

un video vale mas que 10 mil palabras
http://youtu.be/-xVVLLkwVBA
codigo css:

Código CSS:

Ver original#nav {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:5px 0px;      /*tamaño de barra de menu*/
    background:#335599 url(../images/gris3.jpg) repeat-x ;
 
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
text-align:center;
}
 
#nav li {
display:inline-block;
    position:relative;
    list-style:none;
    display: inline-block;
    list-style-type: none;
    white-space: nowrap;
    margin: 0px auto;
    padding:0px auto;
}
#nav a {
    font-weight:bold;
    font-size: 20px;        
    color:#0000a0;      
    display:inline-block;
    padding:0px 30px;        
    border-radius:10px;     
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:1 2px 2px rgba(0,0,0, .7);
    text-decoration:none;
 
}
 
/* selected menu element */
#nav .current > a {
    background:#DEDEDE;
    color:#359;
    border-top:1px solid #f8f8f8;
    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
 
#nav li:hover > a {
    background:#7788aa url(../images/bg.png) repeat-x ;
    color:#000;
    border-top:1px solid #f8f8f8;
    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
 
/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
    font-size: 20px;
    font-weight:bold;
    padding:0px 5px;    
}
 
#nav ul li a:hover {
    background:#359;
    color:#fff;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
 
}
 
#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
     
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
 
/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:1;
    visibility:hidden;
    padding:0;
    width:190px;        
    z-index: 100;           
    position:absolute; 
    background:#aabbcc url(../images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
 
    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    font-weight:normal;
    clear:left;  
    float:left;    
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:180px;
    top:0px;

AYUDA POR FAVOR

cell001 · #2 (**permalink**) 28/10/2013, 21:42

pon también el código html del menu para que los que entren puedan entenderle mejor a todo.

jhonnymontoya · #3 (**permalink**) 28/10/2013, 21:59

es un simple menú horizontal

Código HTML:

Ver original<!doctype html>
<html lang="es-ES"><html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
        
    </head>
    <body>
<div class="centroweb">
    <header id="cabeza"> 
         
    </header>
    <nav>
        <ul id="nav">
            <li class="current"><a href="index.html">Inicio</a></li>
            <li><a href="servicios.html">Servicios</a>
                <ul>
                
                    <li><a href="servicios/paginasweb.html">Paginas Web&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp </a></li>
                    <li><a href="http://www.forosdelweb.com/f53/facturacion.html">Asambleas y facturas </a></li>
 
                </ul>
            </li>
            <li><a href="quienessomos.html">Quiénes Somos</a></li>
            <li><a href="Contactenos.html">Contáctenos</a>
                <ul>
                    <li><a href="Contactenos.html">Inquietudes &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</a></li>
                    <li><a href="trabaja.html">Trabaja con Nosotros</a></li>
                    
                </ul>
            </li>
            <li><a href="Ubicacion.html">Ubicación</a></li>
        </ul>
    </nav>
    </body>
</html>

pzin · #4 (**permalink**) 29/10/2013, 02:39

Bienvenido al foro.

El menú está bastante mal hecho, igual que el post.

Eso de usar espacios   es una chapuza como la copa de un pino. Si quieres que los enlaces ocupen todo el ancho, conviértelos en elementos de bloque:

Código CSS:

Ver originaldisplay: block;

Y el error que tienes, que se cambien los estilos 0,25 segundos al quitar el ratón por encima, es porque estás estilizando esos enlaces cuando el ratón esté encima de li (cosa que no tiene sentido) y luego tienes una animación de 0.25 segundos para ocultar ese submenú, lo que causa eso... Así que lo que tendrías que hacer en principio es no estilizar los enlaces por defecto y no cuando esté el puntero encima del elemento de la lista.

Cuando publiques código, usa highlight para resaltarlo. E intente al menos explicar tu problema en lugar de poner un vídeo.

jhonnymontoya · #5 (**permalink**) 29/10/2013, 16:18

Pzin mil gracias el problema del menú si se soluciono con lo que dijo del la animación de 0.25 pero lo del

Código CSS:

Ver originaldisplay: block;

se que es una mala práctica pero hace tiempo intente buscar una ayuda para eso pero no encontré respuesta

ese tema lo pensaba coger después de sacar la pagina ya que no es tan funcional el error si me puedes colaborar con eso me sería muy útil.
Muchas Muchas gracias por la ayuda del menú

jhonnymontoya · #6 (**permalink**) 30/10/2013, 16:55

estuve consultando y el código debe ir en esta etiqueta

Código CSS:

Ver original#nav ul a {
    
    font-weight:normal;
    text-shadow:0 20px 20px rgba(255,255,255, 0.7);
    display: block;
}

pero la cocolo en esa y no me funciona para que el azul resaltado me funcione hasta el bordo. Para no utilizar el codigo

Código HTML:

Ver original&nbsp

o estoy equivocado???

Rafael · #7 (**permalink**) 30/10/2013, 21:45

Hola.

Cita:

se que es una mala práctica

Para nada es una mala práctica convertir un enlace a elemento de bloque.

También se puede convertir a inline-block.

cell001 · #8 (**permalink**) 30/10/2013, 23:45

No se si sigas tratando con ese método pero porque no intentas con este ejemplo?

[URL="http://technoandesign.wordpress.com/2013/03/23/ejemplo-de-menu-desplegable/"]http://technoandesign.wordpress.com/2013/03/23/ejemplo-de-menu-desplegable/[/URL]

A mi me sirvió para cuando hice un menú desplegable

pzin · #9 (**permalink**) 31/10/2013, 03:20

Cita:

Iniciado por jhonnymontoya

estuve consultando y el código debe ir en esta etiqueta

Código CSS:

Ver original#nav ul a {
    
    font-weight:normal;
    text-shadow:0 20px 20px rgba(255,255,255, 0.7);
    display: block;
}

pero la cocolo en esa y no me funciona para que el azul resaltado me funcione hasta el bordo. Para no utilizar el codigo

Código HTML:

Ver original&nbsp

o estoy equivocado???

En realidad si que funciona, porque el enlace ocupa todo el ancho, pero como tienes los li flotados en lugar de tenerlo con un display: block, pues estos tienen el ancho según su contenido...

jhonnymontoya · #10 (**permalink**) 31/10/2013, 21:26

Cita:

Iniciado por cell001

No se si sigas tratando con ese método pero porque no intentas con este ejemplo?

[URL="http://technoandesign.wordpress.com/2013/03/23/ejemplo-de-menu-desplegable/"]http://technoandesign.wordpress.com/2013/03/23/ejemplo-de-menu-desplegable/[/URL]

A mi me sirvió para cuando hice un menú desplegable

Lo mire, pero los cambios que tiene los hago y me desconfigura el menu o no funciona.

Cita:

Iniciado por pzin

En realidad si que funciona, porque el enlace ocupa todo el ancho, pero como tienes los li flotados en lugar de tenerlo con un display: block, pues estos tienen el ancho según su contenido...

Intente quitar los li flotados y cambiarlos por block pero se me des-configura el menú

como lo quiero, tengo algo que se sobrepone al block que necesito.

de todas maneras muchas gracias Pzin . si tienes alguna otra sugerencia o alguien la tiene soy todo oídos

pzin · #11 (**permalink**) 01/11/2013, 00:38

Tienes que quitar el flotado sólo a los li del submenú.

jhonnymontoya · #12 (**permalink**) 04/11/2013, 12:55

Cita:

Iniciado por pzin

Tienes que quitar el flotado sólo a los li del submenú.

Gracias eso si cuadro la mala practica que tenia, descuadro la letra (la centro) pero buscando la pude cuadrar muchas gracias por tu respuestas Pzin, perdona soy nuevo en el tema pero estoy aprendiendo con muchas ganas