barre de navigation horizontale avec un deuxième niveau horizontal qui utilise des images

Question

quelqu'un peut-il s'il vous plaît recommander une barre de navigation horizontale avec un deuxième niveau horizontal qui utilise des images. Lorsque l'utilisateur survole une image, une souris sur modifie l'image.

Quelque chose de similaire .... http: //www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ mais en utilisant des images. J'ai commencé à travailler là-dessus et je suis allé assez loin, mais depuis que j'ai utilisé des images pour la barre de navigation secondaire, je peux seulement obtenir mes images à afficher comme vertical plutôt qu'horizontale.

Je sais que la classe incriminée est celle ci-dessous, lorsque le nav secondaire est défini sur horizontal. Comme lorsque j'ai ajouté des classes différentes ... boyLink et girlLink à l'étiquette, il a commencé à afficher vertical. Je ne sais pas si je devrais ajouter boyLink et girlLink à ul # topnav li span a?
:
/--Show subnav on hover--/ ul#topnav li span a { display: inline; }

ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; font-size: 1.2em; }

ul#topnav li 
    { 
     float: left; 
     margin: 0; 
     padding: 0; 
     background-color: Red; 
    } 

    ul#topnav li a 
    { 
     padding: 0px 0px 0px 0px; 
     margin: 0px; 
     display: block; 
     text-decoration: none; 
    } 


    ul#topnav li span 
    { 
     float: left; 
     margin: 0; 
     padding: 0; 
     position: absolute; 
     left: 0; 
     top: 25px; 
     display: none; /*--Hide by default--*/ 
     width: 970px; 
    } 

    ul#topnav li:hover span 
    { 
     display: block; 
    }  


    /*--Show subnav on hover--*/ 
    ul#topnav li span a 
    { 
     display: inline; 
     float:left; 
    } 


    /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/ 
    ul#topnav li span a:hover 
    { 
     text-decoration: underline; 
     display: inline; 
    } 

    img 
    { 
     border: none; 
    } 

    ul#topnav li #homeLink 
    { 
     width: 51px; 
     height: 25px; 
     display: block; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/nav01U.jpg"); 
    } 

    ul#topnav li:hover #homeLink:hover 
    { 
     background-image: url("Content/Images/Nav/nav01.jpg"); 
    } 

    ul#topnav li #collectionLink 
    { 
     width: 97px; 
     height: 25px; 
     display: block; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/nav02U.jpg"); 
    } 

    ul#topnav li:hover #collectionLink:hover 
    { 
     background-image: url("Content/Images/Nav/nav02.jpg"); 
    }  


    ul#topnav li:hover #contactUsLink:hover 
    { 
     background-image: url("Content/Images/Nav/nav06.jpg"); 
    } 

    ul#topnav li:hover span .girlLink 
    { 
     width: 38px; 
     height: 31px; 
     display: block; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/snav01U.jpg"); 
    } 

    ul#topnav li:hover span .girlLink:hover 
    { 
     background-image: url("Content/Images/Nav/snav01.jpg"); 
    } 



    ul#topnav li:hover span .boyLink 
    { 
     width: 37px; 
     height: 31px; 
     display: block; 
     font-size: 10px; 
     text-decoration: none; 
     background-repeat: no-repeat; 
     background-image: url("Content/Images/Nav/snav02U.jpg"); 
    } 

    ul#topnav li:hover span .boyLink:hover 
    { 
     background-image: url("Content/Images/Nav/snav02.jpg"); 
    } 



</style> 

Html Code

<li> 
     <a href="collection.aspx" id="collectionLink">&nbsp; </a> 

     <!--Subnav Starts Here--> 
     <span> 
      <a href="girl.aspx" class="girlLink">&nbsp; </a> 
      <a href="boy.aspx" class="boyLink">&nbsp; </a> 
     </span> 
     <!--Subnav Ends Here--> 

    </li> 

</ul> 

Answer 1

Si vous changez l'affichage de votre a: inline pour flotter: à gauche cela fonctionnera.

Answer 2

Vous n'avez pas besoin javascript pour faire des images mouseover plus:

a:link { /* normal stuffs */ } 
a:hover { /* "mouseover" stuffs */ } 

En ce qui concerne la structure , JE ne vois pas de problème avec le css que vous avez posté sur ma fin ... Peut-être que vous essayez de mettre un tag img dans l'ancre: C'est une mauvaise idée. Vous devez charger une image en tant qu'attribut css en arrière-plan afin qu'elle ne gâche pas votre formatage.