vertikale Listen-Navigation ohne HTML zu ändern

[limubai81]

Hiho ich soll eine Navigation nachbauen die der im unten angegeben Link ähnelt.
http://freizeitanlagen-plauen.de

Da dies leider ein selbst entwickeltes CMS ist und ich keine Änderung am eigentlichen HTML-Gerüst vornehmen darf bin ich sehr stark eingeschränkt. Laut Vorgabe soll dies mit CSS und JS realisierbar sein.
Hier mal der Code von der Liste:

<div id="ContentPlaceHolder1_myMenuLeft" class="mynav">
    <ul id="mynav" style="padding:0px;margin:0px;width:100%;">
    <li style="whitespace: nowrap;"><a class="isActive" href="hauptseite1.aspx" target="_self" style="">Seite 1
    </a>
    <ul style="display: none;">
    <li style="whitespace: nowrap;"><a class="" href="unterseite1_1.aspx" target="_self" style="">Unterseite 1
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class=""  href="unterseite1_2.aspx" target="_self" style="">Unterseite 2
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite1_3.aspx" target="_self" style="">Unterseite 3
    </a>
    </li>
    </ul>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="hauptseite2.aspx" target="_self" style="">Hauptseite 2
    </a>
    <ul style="display: none;">
    <li style="whitespace: nowrap;"><a class="" href="unterseite2_1.aspx" target="_self" style="">Unterseite 2.1
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite2_2.aspx" target="_self" style="">Unterseite 2.2
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite2_3.aspx" target="_self" style="">Unterseite 2.3
    </a>
    </li>
    </ul>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="hauptseite3.aspx" target="_self" style="">Hauptseite 3
    </a>
    <ul style="display: none;">
    <li style="whitespace: nowrap;"><a class="" href="unterseite3_1.aspx" target="_self" style="">Unterseite 3.1
    </a>
    </li>
    <li style="whitespace: nowrap;"><a class="" href="unterseite3_1.aspx" target="_self" style="">Unterseite 3.2
    </a>
    </li>
    </ul> 
    </li>
    </ul>
</div>

Die Klasse "isactive" wird über JS vergeben.
Kennt jemand vielleicht ein Tutorial oder so womit sich das umsetzen lassen würde?

lg limu

 

[Trabilady]

AW: vertikale Listen-Navigation ohne HTML zu ändern

Hallo limubai,

Ich glaube, dass Du größere Chancen auf eine Antwort hast, wenn Du schon mal einen Versuch von Dir selbst zeigst (CSS) - anderenfalls ähnelt Deine Anfrage eher einem Auftragsangebot

 

[limubai81]

AW: vertikale Listen-Navigation ohne HTML zu ändern

ist klar, will ich ja auch gar nicht
Habe aber vorhin gemerkt das vorher noch ein JS-Problem behoben werden muss. Da im "Template" ein JS liegt das die untergeordneten Listen bei Hover rechts neben dem Hauptpunkt erscheinen lässt und das JS darf nicht entfernt werden. :hmpf:

Wenn das Problem behoben ist werd ich mich nochmal melden und die auch die CSS-Schnipsel posten.

lg limu

 

[lucifer-bw]

AW: vertikale Listen-Navigation ohne HTML zu ändern

Dein Problem sind die bereits vergebenen Eigenschaften.
Mit der CSS-Anweisung !important kannst du Sie trotzdem überschreiben.

Ein fiddle gibts auch:

Würde ich für die Stunde 120Euro nehmen, wäre mein Rechnungsbetrag jetzt 10,- Euro.
Super Auftragsangebot.