mit mehreren Ebenen vertikal unorder Listenmenü

Question

alt text http://www.pwiser.com/error.png Hallo, ich möchte unorder Liste basiert Menü nicht in der Lage zu machen, um es herauszufinden ich das Bild angehängt zum besseren Verständnis bitte unten helfen ist meine CSS und 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

obige Frage geklärt Lösung Posting, wenn ein Menü benötigen wie dieses

<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; 
} 

i einige Verbesserungen machen, aber grundlegende Struktur ist komplett cheers :)

Answer 2

Ich denke, Ihr ...

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

Ist der wahrscheinliche Täter. Position: relativ; entfernt es von der Seite und positioniert damit den LI darunter. Ersetzen Sie, dass die ganze Regel mit diesem:

#verticalSubmenu ul ul { 
    display: block; 
} 

Answer 3

Es sieht aus wie das obige Beispiel ein 3-Ebenen-Menü sein kann - was nicht viel härter als die 2 Menüebene ist man schon haben, wenn Sie es bekommen zu arbeiten.

ist mein Vorschlag, die ganze Sache zu bauen, so dass Sie ein massives gespreizte Menü haben, und nicht nur in der Li und UL angemessen setzen, was auch immer Abschnitt sind sie zur Zeit in, dann etwas tun, wie folgt aus:

ul ul { 
display: none; 
} 

ul li.lit ul { 
display: block; 
} 

Dann geben Sie jeden Menüeintrag, in dem sie sich befinden, in die Klasse von .lit ein, und das Menü wird nur als geöffnet angezeigt. Es ist viel einfacher als ein benutzerdefiniertes Menü für jede Seite zu erstellen.