Hover o <a href> no funciona :(

maripa950 · #1 (**permalink**) 23/03/2016, 20:17

Hola, necesito resolver porque no me sirve el hover, ni el puntero de mi menu principal... por mas que busco la falla no la encuentro!.. dejo el codigo:

Código HTML:

Ver original<html lang="es">
 
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="estilo.css" />
<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />
</head>
 
<body>
<--ESTE ES MI MENU PRINCIPAL!!-->
      <nav class="menu">
        <ul>
<li class="sin"> <a href="http://cargocollective.com/consuelovalle/filter/editorial/">Editorial  </a></li>
<li><a href="http://cargocollective.com/consuelovalle/filter/personal/">Personal  </a></li>
<li><a href="http://cargocollective.com/consuelovalle/filter/videos/">Videos</a></li>
 
        </ul>
  </nav>
   
 
     <div id="main">
        <div class="logo"><a href="http://cargocollective.com/consuelovalle/"><img src="http://i.imgur.com/iJdtKZB.png" /> </a></div>
        <div class="fijo"></div>
        <div class="contacto"> <a href="http://cargocollective.com/consuelovalle/contacto"> Contacto </a></div>
        
        
<ul class="redes">
 
<li><a href="https://www.facebook.com/ovalle.consuelo">Comercial  </a></li>
<li><a href="http://consuelovalle.tumblr.com">Tumblr  </a></li>
<li class="sin"><a href="https://www.instagram.com/consuelovalle/">Instagram  </a></li>
 
</ul>
         
    </div>
<div class="f_footer">All work © Consuelo Ovalle</div>
</body>
</html>

Y Aqui mi CSS!!:

Código CSS:

Ver original/* MENU */
 
nav{
     height:auto; /*Junto a overflow: hidden; aplicará a nuestro elemento nav el mismo alto que el más alto de sus elementos hijos */ 
     margin: 0 auto; /* Centro el contenedor */
     overflow: hidden;
     text-align: left;
     width:100%; /* Defino el ancho de mi página */
     background: #0033ff;
     z-index: 100;
     position: fixed;
        }
 
 .menu ul{
        float: left;
        list-style-type: none;
        padding: 0; 
        position: relative; 
        left: 50%;
        margin-top: 5px;
        margin-bottom: 5px;
        }
    
 .menu li{
        float: left; /* Floto los li para que se dispongan horizontalmente */
        position: relative; 
        right: 50%;
        }
 
     .menu li a{
        padding: 15px;
            
        }
 
.menu ul a{ text-decoration: none; font-size: 14px; color:#ffffff; }
 
 
.menu ul > li:before{
    content: "–"; 
    position: absolute;
    margin-left:-1px;
    margin-top: 0px;
    color: #ffffff;
    font-size: 15px;
}
 
.menu ul > li.sin:before{
    color: transparent;
 
}
 
ul.menu a:hover{
    color:#fffff;
    background:red;} /*url("http://i.imgur.com/47R7Nqs.png")no-repeat*/

PORFAVOR AYUDA :(!!!

obitox · #2 (**permalink**) 24/03/2016, 09:51

Hola,

En el HTML la clase .menu la posees dentro del tag <nav> y en el CSS le estas haciendo referencia como si este fuese una clase del tag <ul> "ul.menu a:hover".

Como lo veo la solución es super sencilla si aun quieres seguir teniendo el ul para acceder al hover del los link puedes hacerlo de la siguiente manera:

Código HTML:

.menu > ul a:hover{
    color:#fffff;
    background:red;
}

Eso es todo, saludos.

maripa950 · #3 (**permalink**) 25/03/2016, 00:03

Obitox muchas gracias por responder!

, pero lamentablemente me sigue sin funcionar, no se si tenga algo que ver con el llamdo que hago en el css, porque no hay nunca acceso al link.. es cmo si el <a href> no me funcionara :(
porfavor ayudaaaa

pzin · #4 (**permalink**) 25/03/2016, 13:51

Con el código que has dejado parece funcionar todo bien:

obitox · #5 (**permalink**) 29/03/2016, 13:38

No veo problema revise el fiddle que realizo pzin y le realice el cambio que te había mencionado antes y funciona muy bien. Puedes compartir tu código por algún sitio conmigo. Quizá pueda revisarlo mejor y ver cual es el inconveniente. Saludos.