Frage stellen
Mein Problem ist folgendes: Ich möchte ein von plenty erstelltes Menü mithilfe von :hover so designen, dass wenn man nur die ersten Menüreiter sieht und wenn man drüber fährt, sich die anderen darunter öffnen. --> horizontal (so wie hier: http://cms.template-help.com/magento_25121/ )
Nunja, mein Problem ist das plentymarkts (ein Shopsystem, im Prinzip her nichts anderes als Joomla und Konsorten im Thema Menü erstellen) mir das Menü so doof ausgibt, bzw nicht so wie ich es will.
Hier der von plenty ausgegebene Code (an dem kann ich nichts ändern):
- Code: Alles auswählen
<div id="navileiste">
<div class="navi">
<ul class="left_menu">
<li class="level1" id="plentycat_53-0-0-0-0-0"><a href="/-Weihnachtsmarkt/c-53-0-0-0-0-0/" title="Weihnachtsmarkt">Weihnachtsmarkt</a></li>
<li class="level2_sub"><ul>
<li class="level2" id="plentycat_53-55-0-0-0-0"><a href="/-Weihnachtsmarkt-3D-Windspiele/c-53-55-0-0-0-0/" title="Weihnachtsmarkt-3D-Windspiele">3D Windspiele</a></li>
<li class="level2" id="plentycat_53-54-0-0-0-0"><a href="/-Weihnachtsmarkt-Hausschuhe/c-53-54-0-0-0-0/" title="Weihnachtsmarkt-Hausschuhe">Hausschuhe</a></li>
</ul></li><li class="level1" id="plentycat_16-0-0-0-0-0"><a href="/-Sanitaerwaren/c-16-0-0-0-0-0/" title="Sanitaerwaren">Sanitärwaren</a></li>
<li class="level2_sub"><ul>
<li class="level2" id="plentycat_16-34-0-0-0-0"><a href="/-Sanitaerwaren-Badarmatur/c-16-34-0-0-0-0/" title="Sanitaerwaren-Badarmatur">Badarmatur</a></li>
<li class="level2" id="plentycat_16-30-0-0-0-0"><a href="/-Sanitaerwaren-Waschtisch-Armaturen/c-16-30-0-0-0-0/" title="Sanitaerwaren-Waschtisch-Armaturen">Waschtisch Armaturen</a></li>
<li class="level2" id="plentycat_16-31-0-0-0-0"><a href="/-Sanitaerwaren-Duschen/c-16-31-0-0-0-0/" title="Sanitaerwaren-Duschen">Duschen</a></li>
<li class="level2" id="plentycat_16-35-0-0-0-0"><a href="/-Sanitaerwaren-Kuechenarmaturen/c-16-35-0-0-0-0/" title="Sanitaerwaren-Kuechenarmaturen">Küchenarmaturen</a></li>
</ul></li><li class="level1" id="plentycat_29-0-0-0-0-0"><a href="/-Autozubehoer/c-29-0-0-0-0-0/" title="Autozubehoer">Autozubehör</a></li>
<li class="level1" id="plentycat_32-0-0-0-0-0"><a href="/-Schmuckverpackungen/c-32-0-0-0-0-0/" title="Schmuckverpackungen">Schmuckverpackungen</a></li>
</ul>
Dazu brauche ich den passenden Code im CSS. Mein Problem ist dieser Teil hier im HTML:
- Code: Alles auswählen
<li class="level2_sub"><ul>
Ich haette es gerne, dass er den ul tag nicht in einem neuen li tag aufmacht, sondern in dem, wo es auch zu gehört. Sprich in dem davor -keinen neuen. Nunja kann ich nichts dran aendern (weil das plentySystem es nun mal so vorschreibt). Aber diese Kleinigkeit versaut es mir dann nummal im CSS. Ich habe immer leere Blöcke ueber diese sich dann im :hover status das menü öffnet. Es soll sich aber beim :hover der ersten kategorienreihe öffnen - nicht bei leeren blöcken. (Siehe den Code, bei dem ich sagte er macht das problem).
Nunja.
Der CSS Code bisher :
- Code: Alles auswählen
#navileiste { height:30px;width:100%;position:fixed;bottom:0;background-color:#9cc75b;margin:0 ;font-family:Helvetica,Arial,sanf-serif; font-weight:bold;font-size:14px;letter-s pacing:1px;color:#ffffff; }
.navi { margin-left:40px; }
/* Style für Schaltflächen, Rahmen und Listen */
.navi ul { margin:0;padding:5px;list-style-type:none;visibility:visible; }
.navi ul ul { width:150px; }
.navi ul li ul li, .navi ul li ul li ul li { border-top:1px solid #ffffff; }
/* Funktion für erste Ebene */
.navi a, .navi a:visited { width:155px;height:30px;padding-left:5px ;color:#ffffff;text-decoration:none;display:block; }
.navi ul li { float:left;; position:relative ;}
/* Position für zweite Ebene */
.navi ul li ul { visibility:hidden;width:150px;position:relative;bottom:10px;left:-5px; }
.navi ul li:hover ul li, .navi ul a:hover ul li { visibility:visible;height:auto; }
/* Funktion für zweite Ebene ohne dritter Ebene */
.navi ul ul a, .navi ul ul a:visited { width:150px;padding:5px;background:#9cc75b;color:#ffffff;height:auto; }
.navi a:hover, .navi ul ul a:hover { background:#ad0044; }
.navi :hover > a, .navi ul ul :hover > a { color:#cccccc; }
Wenn ihr wie gesagt mein kleines problem von dem plenty ausgegebenen Code ändert (was nicht geht), also dieser code:
- Code: Alles auswählen
<div id="navileiste">
<div class="navi">
<ul class="left_menu">
<li class="level1" id="plentycat_53-0-0-0-0-0"><a href="/-Weihnachtsmarkt/c-53-0-0-0-0-0/" title="Weihnachtsmarkt">Weihnachtsmarkt</a><ul>
<li class="level2" id="plentycat_53-55-0-0-0-0"><a href="/-Weihnachtsmarkt-3D-Windspiele/c-53-55-0-0-0-0/" title="Weihnachtsmarkt-3D-Windspiele">3D Windspiele</a></li>
<li class="level2" id="plentycat_53-54-0-0-0-0"><a href="/-Weihnachtsmarkt-Hausschuhe/c-53-54-0-0-0-0/" title="Weihnachtsmarkt-Hausschuhe">Hausschuhe</a></li>
</ul></li><li class="level1" id="plentycat_16-0-0-0-0-0"><a href="/-Sanitaerwaren/c-16-0-0-0-0-0/" title="Sanitaerwaren">Sanitärwaren</a><ul>
<li class="level2" id="plentycat_16-34-0-0-0-0"><a href="/-Sanitaerwaren-Badarmatur/c-16-34-0-0-0-0/" title="Sanitaerwaren-Badarmatur">Badarmatur</a></li>
<li class="level2" id="plentycat_16-30-0-0-0-0"><a href="/-Sanitaerwaren-Waschtisch-Armaturen/c-16-30-0-0-0-0/" title="Sanitaerwaren-Waschtisch-Armaturen">Waschtisch Armaturen</a></li>
<li class="level2" id="plentycat_16-31-0-0-0-0"><a href="/-Sanitaerwaren-Duschen/c-16-31-0-0-0-0/" title="Sanitaerwaren-Duschen">Duschen</a></li>
<li class="level2" id="plentycat_16-35-0-0-0-0"><a href="/-Sanitaerwaren-Kuechenarmaturen/c-16-35-0-0-0-0/" title="Sanitaerwaren-Kuechenarmaturen">Küchenarmaturen</a></li>
</ul></li><li class="level1" id="plentycat_29-0-0-0-0-0"><a href="/-Autozubehoer/c-29-0-0-0-0-0/" title="Autozubehoer">Autozubehör</a></li>
<li class="level1" id="plentycat_32-0-0-0-0-0"><a href="/-Schmuckverpackungen/c-32-0-0-0-0-0/" title="Schmuckverpackungen">Schmuckverpackungen</a></li>
</ul>
... dann wunder wunder, es geht. Leider kann ich an dem HTML Code nichts ändern - nur am CSS. Und genau das ist mein Problem:
Kann mir da einer helfen den CSS Code für den besagten nicht änderbaren HTML Schnipsel zu schreiben? Bitte.
Liebe Grüße, Gerrit