2010-11-22 11 views
0

Ich erstelle ein Dropdown-Menü basierend auf Suckerfish. Die oberste Ebene wird korrekt angezeigt, die erste Untermenüebene setzt jedoch alle übereinander gestapelten Menüelemente unter die oberste Ebene. Alles ist korrekt, außer dass die Elemente sich überlappen. Mein HTML und CSS sind unten.CSS DropDown Menüelemente, die einander überlappen

<ul id="nav"> 
    <li style="border-left: none;"> 
     <link here> 
     <ul> 
      <li> 
       <link here> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
       <ul> 
        <li> 
         <link here> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <link here> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
     <ul> 
      <li> 
       <link here> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
    <li> 
     <link here> 
    </li> 
</ul> 


#nav, #nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

#nav a { 
    display: block; 
} 

#nav li { 
    float: left; 
    padding: 0px 10px 0px 10px; 
} 

#nav li ul { 
    position: absolute; 
    width: 200px; 
    color: #FFF; 
    background-color: #000; 
    left: -999em; 
} 

#nav li:hover ul { 
    left: auto; 
} 

#nav li:hover ul, #nav li.sfhover ul { 
    left: auto; 
} 

#nav li ul ul { 
    margin: -1em 0 0 10em; 
} 

#nav, #nav ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    line-height: 1; 
} 

#nav li:hover ul ul, #nav li.sfhover ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { 
    left: auto; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 
    left: auto; 
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul { 
    left: -999em; 
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul { 
    left: auto; 
} 

Mein CSS ist ziemlich direkt von Suckerfish gezogen. Es gibt ein paar kleine Änderungen wie die Breite und Hintergrundfarbe, aber das Problem war dort, auch wenn es eine direkte Kopie war. Derzeit versuche ich nur, dies in Firefox zu bekommen, da ich das gleiche Problem in jedem Browser bekomme, den ich versuche.

Nur ein fyi, ich benutze Umbraco als CMS für diese Website, und es generiert die HTML für das Menü. Es gibt tatsächliche Links, die ich einfach nicht posten kann, da ich neu hier bin, sie enthalten nur das hfer-Attribut.

Dank

Antwort

0

Soweit ich die sucker Technik weiß nicht, Dual verschachtelte Listen nicht unterstützt. Das bedeutet, dass ein UL so tief verschachtelt werden kann, wie Sie es möchten (wenn das CSS dies natürlich unterstützt), aber was es nicht tun kann, ist, dass ULs auf der gleichen Ebene stehen.

Bitte überprüfen Sie meine überarbeitete HTML (ohne Dual Nested ULs).

<ul id="nav"> 
    <li style="border-left: none;"> 
     <a href="#">Test link</a> 
     <ul> 
      <li> 
       <a href="#">Test link</a> 
      </li> 
      <li> 
       <a href="#">Test link</a> 
      </li> 
      <li> 
       <a href="#">Test link</a> 
       <ul> 
        <li> 
         <a href="#">Test link 1</a> 
        </li> 
        <li> 
         <a href="#">Test link 2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Test link</a> 
     <ul> 
      <li> 
       <a href="#">Test link</a> 
       <ul> 
        <li> 
         <a href="#">Test link 1</a> 
        </li> 
        <li> 
         <a href="#">Test link 2</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Sie können auch check it online.

Nebenbei bemerkt scheint Ihr CSS für die Items und Second Level ULs etwas Arbeit zu benötigen (sie schweben jetzt falsch - je nachdem, wie Sie es natürlich aussehen lassen wollen).

+0

Ja, das war es, habe die unnötigen ULs nicht gesehen Danke – Court

Verwandte Themen