Comment afficher correctement le sous-menu?

Question

Je construis une navigation horizontale qui a aussi un sous-menu horizontal. Soh Tanaka a un joli didacticiel, mais le sous-menu ne s'affiche pas correctement.

Voici le code HTML:

<ul id="mainNav"> 
     <li><a class="selected" href="#">Home</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">About Us</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">Home Remodels</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">New Home Builds</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">Our Portfolio</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     <li><a href="#">Our Blog</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">FAQ'S</a></li> 
     <li> 
      <span> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
       <a href="#">Sub Item 1</a> 
      </span> 
     </li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 

Voici le css:

ul#mainNav     { 
         clear: both; 
         width: 935px; 
         height: 39px; 
         margin: -5px 0 0 0; 
         padding: 0; 
         float: left; 
         list-style-type: none; 
         position: relative; 
         background-color: #0d0600; 
         font: bold 14px Arial, Helvetica, sans-serif; 
         text-transform: uppercase; 
         color: #fff; 
         } 
ul#mainNav li    { float: left; margin: 0; padding: 0; } 
ul#mainNav li a    { padding: 12px 15px 12px 14px; display: block; text-decoration: none; color: #fff; } 
ul#mainNav li a.selected, 
ul#mainNav li a:hover  { background: #b5a37e url(../_images/bg_mainNav.jpg) repeat-x left top; } 

ul#mainNav span    { 
         float: left; 
         display: none; 
         padding: 15px 0; 
         position: absolute; 
         z-index: 10; 
         left: 0; 
         top: 35px; 
         width: 935px; 
         background-color: #b5a37e; 
         color: #fff; 
         text-transform: none; 
         } 
ul#mainNav li:hover span { display: block; } 
ul#mainNav li span a  { display: inline; } 
ul#mainNav li span a:hover { text-decoration: underline; } 

Le seul problème est que dans mon working example, le sous-menu ne se présente pas.

J'apprécierais quelques conseils ici.

Merci!

Answer 1

d'abord tout ce que vous ne le faites pas droit .... afficher la source de tuturial de Soh Tanaka ...

la structure du bloc de code html est comme ça,

<ul id="topnav"> 
     <li><a href="#">Home</a></li> 
     <li> 
      <a href="#">About</a> 
      <span> 
       <a href="#">The Company</a> | 
       <a href="#">The Team</a> | 
       <a href="#">Careers</a> 
      </span> 
     </li> 
....................... 

en ce que Home n'a pas de sous-menu, car il n'a pas de durée ... contrairement à About qui a l'envergure .... a obtenu la différence avec votre structure html?

Answer 2

vous n'afficher réellement la durée - il est configuré pour afficher aucune, mais je suis sûr que rien ne change jamais cette option pour afficher le bloc dans l'une des missions de vol stationnaire

Answer 3

Vous devez faire un peu de javascript. Je vais vous donner un exemple dans jQuery:

$(document).ready(function(){ 

     $('li a').mouseover(function() { $(this).parent().next().css("display", "inline"); }).mouseout(function() { $(this).parent().next().css("display", "none"); }) 

}); 

Ne l'avez pas testé, mais cela devrait fonctionner.