Menu multi-niveaux de liste UNORDER verticale

Question

alt text http://www.pwiser.com/error.png Salut, je veux faire le menu sur la base de la liste de UNORDER incapable de le comprendre i attachais l'image pour une meilleure compréhension s'il vous plaît aider ci-dessous est mon css et xhtml

 
#verticalSubmenu ul 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 11px; 
text-transform:uppercase; 
} 

#verticalSubmenu li { margin: 0 0 3px 0; background:#dedede; border: 1px solid #f7f7f7; color:#666666; height:auto; 
} 
#verticalSubmenu li.parent { background:#6c6b6b; color:#fcfafa; height:auto; 
} 

#verticalSubmenu a 
{ 
    display: block; 
    padding: 4px 2px 2px 10px; 
    width: 138px; 

} 

#verticalSubmenu li a:link, #navlist a:visited{ 
color: #666666; 
text-decoration: none; 
} 

#verticalSubmenu li.parent a:link, #navlist a:visited 
{ 
color: #fcfafa; 
} 
#verticalSubmenu ul ul { 
    position:relative; 
    height:0; 
    top:10px; 
    left:0; 
    } 
#verticalSubmenu ul ul li{ 
    background:#f9f9f9; 
    border:1px solid #f9f9f9; 
    } 
#verticalSubmenu ul ul a{ 
    padding: 4px 2px 2px 20px; 
    height:auto; 
    } 

<div id="verticalSubmenu"> 
       <ul id="navlist"> 
        <li class="parent"><a href="#">Item one</a></li> 
        <li><a href="#">Item two</a></li> 
        <li><a href="#">Item three</a></li> 
        <li><a href="#">Item four</a></li> 
        <li> 
         <a href="#">Item five</a> 
         <ul> 
          <li> <a href="#">Item six</a></li> 
          <li> <a href="#">Item six</a></li> 
          <li> <a href="#">Item six</a></li> 
          <li> <a href="#">Item six</a></li> 
         </ul> 
        </li> 
       <li><a href="#">Item four</a></li> 
       </ul> 
      </div>     

Answer 1

question ci-dessus résolu de solution si l'affichage une besoin menu comme ce

<div id="verticalSubmenu"> 
       <ul id="navlist"> 
        <li class="parent"><a href="#">Item one</a></li> 
        <li><a href="#">Item two</a></li> 
        <li><a href="#">Item three</a></li> 
        <li><a href="#">Item four</a></li> 
        <li> 
         <a href="#">Item five</a> 
         <ul> 
          <li> <a href="#">Third Level</a></li> 
          <li> <a href="#">Third Level</a></li> 
         </ul> 
        </li> 
       <li><a href="#">Item six</a></li> 
       <li><a href="#">Item seven</a></li> 
       <li><a href="#">Item eight</a></li> 
       <li class="parent"><a href="#">Item one</a></li> 
        <li class="parent"><a href="#">Item one</a></li> 
        <li class="parent"><a href="#">Item one</a></li> 
       </ul> 
      </div> 

#verticalSubmenu ul 
{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px; 
    text-transform:uppercase; 
} 

#verticalSubmenu li { 
    float:left; 
    margin: 0 0 3px 0; 
    color:#666666; 
    height:auto; 
    display:block; 
} 

#verticalSubmenu li a 
{ 
    display: block; 
    padding: 5px 2px 2px 10px; 
    width: 138px; 
    height:16px; 
    border: 1px solid #f7f7f7; 
    background:#dedede; 
    color:#6e6e6e; 
    text-decoration:none; 
    } 
#verticalSubmenu li.parent a 
{ 
    background:#6c6b6b; 
    color:#fcfafa; 
    } 
#verticalSubmenu ul ul{ 
    margin-top:10px; 
    position:relative; 
    } 
#verticalSubmenu ul ul li a{  
    display: block; 
    padding: 4px 2px 2px 20px; 
    width: 128px; 
    background:#f9f9f9; 
} 

je vais faire une certaine amélioration, mais la structure de base est hourras complet :)

Answer 2

Je pense votre ...

#verticalSubmenu ul ul { 
    position:relative; 
    height:0; 
    top:10px; 
    left:0; 
} 

Est le coupable probable. position: relative; l'enlèvera de la page, positionnant ainsi le LI ci-dessous. Remplacer cette règle tout avec ceci:

#verticalSubmenu ul ul { 
    display: block; 
} 

Answer 3

Il ressemble à l'exemple ci-dessus peut être un menu 3 niveaux - qui ne sont pas beaucoup plus difficile que le menu 2 niveau que vous avez déjà une fois que vous le faire fonctionner.

Ma suggestion est de construire la chose si vous avez un menu développé massif, plutôt que de ne mettre en appropriée de ce li et ul à ce que la section qu'ils sont actuellement, faire quelque chose comme ceci:

ul ul { 
display: none; 
} 

ul li.lit ul { 
display: block; 
} 

Ensuite, donnez à n'importe quel élément de menu dans lequel ils se trouvent (sur la li) la classe de .lit et cela montrera seulement que ce menu est ouvert. C'est beaucoup plus facile que de générer un menu personnalisé pour chaque page.