[GELÖST] Ausklappmenü Formatierung?

noober · 09. September 2011 13:07

Ich habe ein Ausklappmenü, einen Menüpunkt ausgewählt. Nun gehe ich mit der Maus zu einem anderen Menüpunkt, das Menü klappt auf und ich bin mit der Maus auf der 2ten Menüebene. Die Anzeige des ausgeklappten Menüpunktes der 1ten Ebene (Schrift grau siehe Grafik) soll anders sein. Wie und mit welcher Bezeichnung formatiere ich diesen Menüpunkt der ersten Ebene?

Zur Verdeutlichung hier ein Bild:

...................................................................................................
Menüstylesheet:
....................................................................................................

#menu_vert {
margin: 0;
padding: 0;
}

.clearb {
clear: both;
}

#menuwrapper {
width: 920px;
height: auto;
border-top: 1px solid #d6b0b0;
border-bottom: 1px solid #d6b0b0;
margin: 0;
padding: 0;
/* IE6 Hack */
height: 1%;
width: auto;
}

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

ul#primary-nav {
padding-top: 0px;
padding-left: 116px;
}

ul#primary-nav ul {
position: absolute;
top: auto;
display: none;
}

ul#primary-nav ul ul {
margin-top: 0px;
margin-left: -1px;
left: 100%;
top: 0px;
}

ul#primary-nav li {
float: left;
margin: 0px;
padding: 0px;
}

#primary-nav li li {
width: 240px;
margin-left: 0px;
margin-top: 0px;
padding: 0px;
float: none;
position: relative;
}

ul#primary-nav li a {
/* menu normal*/
font-size : 11px;
text-transform : uppercase;
color : #4a4a4a;
letter-spacing : 0.12em;
padding: 5px 16px 4px 16px;
display: block;
text-decoration: none;
}

ul#primary-nav li a:hover {
/* menu over*/
color:white;
}

ul#primary-nav li li a:hover {
/* submenu over*/
}

ul#primary-nav li a.menuactive {
color: white;
background-color: #662222;
}

ul#primary-nav li a.menuactive.menuparent {
color: white;
border: 1px solid green;
}

ul#primary-nav li a.menuactive:hover {
}

#primary-nav li li a.menuparent span {
display: block;
}

* html #primary-nav li li a.menuparent span {
}

ul#primary-nav li ul a {
text-align: left;
margin: 0px;
position: relative;
padding: 10px 0px 8px 20px;
font-weight: normal;
color: white;
border-bottom: 1px solid #996666;
text-transform : none;
letter-spacing : 0.025em;
font-size : 12px;
background-image:url(/uploads/images/advisory_menu-bg_dunkel.png);
}

ul#primary-nav li ul {
margin: 0px;
padding: 0px;
position: absolute;
width: auto;
height: auto;
display: none;
position: absolute;
z-index: 999;
}

ul#primary-nav li ul ul {
}

/* submenu flächen */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
color: white;
background-image:url(/uploads/images/advisory_menu-bg_hell.png);
}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited, for fourth level add
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}

/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}

/* IE6 Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}

Cherry · 09. September 2011 15:12

Wäre schön, wenn's nen Link zu dem Problem gäbe.

VG
Cherry

noober · 09. September 2011 15:37

Ich möchte keinen Link einstellen, da es sich um eine Auftragsarbeit handelt die der Kunde noch nicht gesehen hat und ich möchte nicht, dass er zufällig vor der ersten Online Preview die Seite irgendwie im Netz finden bzw. sehen kann.

mike-r · 09. September 2011 20:32

Das sollte ganz einfach über a:hover zu lösen sein.
bzw. aus Deinem Stylesheet:

Hier klicken, um den Code zum Kopieren zu markieren

[== css ==]ul#primary-nav li a:hover {
/* menu over*/
        color:white;
}

ul#primary-nav li li a:hover {
/* submenu over*/
}

hast Du Dir Firebug schonmal angeschaut?

Edit: Wenn Du schon keinen Link gibst, wäre das HTML auch ganz interessant. Bzw. ein mini-Testcase auf anderem Server. Der Vorteil beim Testcases bauen ist btw der, dass man in 80% der Fälle den Fehler auch selbst findet...

Beitrag geändert von mike-r (09. September 2011 20:35)

noober · 12. September 2011 23:23

habe mir das Ganze mit Firebug angeschaut und glaube irgendwie, dass für den Punkt: 1te Ebene Auszeichnung bei Mouse over 2te Ebene und einem anderen aktive Menüpunkt die Bezeichnung im Stylesheet fehlt.
Habe alle hovers mit Testfarben versehen und kein Ergebnis erziehlt.
Hat nicht irgendwer einen Tip wie dieser Bezeichner heißen könnte?

mike-r · 12. September 2011 23:46

Soll ich Dir meinen Beitrag jetzt nochmal komplett zitieren?
Kurzfassung: Du hast in dem von mir aus Deinem CSS zitierten Code keine Werte für Background angegeben.

noober · 12. September 2011 08:46

habe ich probiert, die Hintergrundfarbe ändert sich auch, nur dass die Hintergrundfarbe und die Schriftfarbe nicht so angezeigt wird wie es sein soll. Habe alle vorhandene hovers (und inzwischen auch alle anderen Formatierungen) zu Testzwecken umgefärbt usw.

ul#primary-nav li li a:hover {
color:#fff;
background-color: #993333;
opacity: 0.90;
}

lt. meinen "Berechnungen" müßte die Bezeichnung sein:
ul#primary-nav li a.menuactive menuparent parent span .... da tut sich aber nichts, auch mit hover

NaN · 12. September 2011 10:33

... li a.menuactive menuparent parent span

Hast Du das so im CSS stehen?
Das wäre falsch.
Richtig wäre

Hier klicken, um den Code zum Kopieren zu markieren

... li a.menuactive.menuparent.parent span

(die Punkte nicht vergessen, denn es gibt keine HTML ELemente namens <menuparent> ... wink )

noober · 12. September 2011 10:50

danke .... leider haben sich meine Berechnungen als falsch herausgestellt, der Menüpunkt ist auch so nicht "anzusteuern" ... hat vielleicht noch wer einen anderen Tip

(ich weiß dass es ohne Link schwer ist - kammt aber sobald der Kunde die Seite das erste Mal gesehen hat ...)

NaN · 12. September 2011 10:52

Poste hier doch einfach mal den resultierenden HTML Code des Menüs.

noober · 12. September 2011 10:55

hier der HTML Code:

.......................................................................................................
<div id="menu">
<div id="menuwrapper">
<ul id="primary-nav">

<li>
<a

href="http://www.XXX.com/index.php?page=startseite">Startseite</a>
</li>

<li class="menuactive parent"><a class="menuactive parent"

href="http://www.XXX.com/index.php?page=ueber-uns">Über uns</a>
<ul class="unli">

<li>
<a

href="http://www.XXX.com/index.php?page=differenzierung">Differenzierung</a>
</li></ul>
</li>

<li class="menuparent"><a class="menuparent"

href="http://www.XXX.com/index.php?page=geschaeftsmodell">Geschäftsmodell</a>

<li>
<a

href="http://www.XXX.com/index.php?page=beratungsansatz">Beratungsansatz</a>
</li>

<li>
<a

href="http://www.XXX.com/index.php?page=prozess">Prozess</a>
</li></ul>
</li>

<li class="menuparent"><a class="menuparent"

href="http://www.XXX.com/index.php?page=referenzen">Referenzen</a>
<ul class="unli">

<li>
<a

href="http://www.XXX.com/index.php?page=case-studies">Case Studies</a>
</li></ul>
</li>

<li class="menuparent"><a class="menuparent"

href="http://www.XXX.com/index.php?page=team">Team</a>
<ul class="unli">

<li>
<a

href="http://www.XXX.com/index.php?page=partner">Partner</a>
</li>

<li>
<a

href="http://www.XXX.com/index.php?page=karriere">Karriere</a>
</li></ul>
</li>

<li>

<a

href="http://www.XXX.com/index.php?page=news-publikationen">News</a>
</li>

<li class="menuparent"><a class="menuparent"

href="http://www.XXX.com/index.php?page=kontakt">Kontakt</a>
<ul class="unli">

<li>
<a

href="http://www.XXX.com/index.php?page=impressum">Impressum</a>
</li>

<li>
<a

href="http://www.XXX.com/index.php?page=disclaimer">Disclaimer</a>
</li>

<li>
<a

href="http://www.XXX.com/index.php?page=sitemap">Sitemap</a>
</li></ul>
</li>
</ul>
<div class="clearb"></div>
</div>

</div>

.................................................................................................................

uniqu3 · 12. September 2011 11:03

Wenn Du farbe des parent links beim hover der untermenüs ändern möchtest sollte doch ul#primary-nav li:hover a { color: #fff;} reichen. Also ein li li a:hover hilft dir nix wenn Du farbe des ersten li ändern möchtest.

NaN · 12. September 2011 11:06

Das Problem ist folgendes:
ul li a:hover wirkt nur auf den Link.
D.h. nur wenn ich über dem Link bin.
Sobald ich aber über das Untermenü gehe, bin ich nicht mehr über dem Link.
Wohl aber noch über dem Listenpunkt.
D.h. versuch mal das hier:

Hier klicken, um den Code zum Kopieren zu markieren

ul#primary-nav li a:hover,
ul#primary-nav li:hover a {
    color:#fff;
    background-color: #993333;
    opacity: 0.90;
}

(Auf deutsch: alle Links bei denen Du mit der Maus drüber gehst und alle Links bei deren übergeordnetem Listenpunkt du mit der Maus drüber bist.)

noober · 12. September 2011 11:19

Juchuuuuuuuuu!!!

das ist die Lösung, vielen Dank ... dass hat mich ca 6 Stunden erfolgloses rumprobieren und geschätzte 20 neue weiße Haare gekostet.

ul#primary-nav li a:hover,
ul#primary-nav li:hover a {...
}

Forum für CMS/made simple

#1 09. September 2011 13:07

[GELÖST] Ausklappmenü Formatierung?

#2 09. September 2011 15:12

Re: [GELÖST] Ausklappmenü Formatierung?

#3 09. September 2011 15:37

Re: [GELÖST] Ausklappmenü Formatierung?

#4 09. September 2011 20:32

Re: [GELÖST] Ausklappmenü Formatierung?

#5 12. September 2011 23:23

Re: [GELÖST] Ausklappmenü Formatierung?

#6 12. September 2011 23:46

Re: [GELÖST] Ausklappmenü Formatierung?

#7 12. September 2011 08:46

Re: [GELÖST] Ausklappmenü Formatierung?

#8 12. September 2011 10:33

Re: [GELÖST] Ausklappmenü Formatierung?

#9 12. September 2011 10:50

Re: [GELÖST] Ausklappmenü Formatierung?

#10 12. September 2011 10:52

Re: [GELÖST] Ausklappmenü Formatierung?

#11 12. September 2011 10:55

Re: [GELÖST] Ausklappmenü Formatierung?

#12 12. September 2011 11:03

Re: [GELÖST] Ausklappmenü Formatierung?

#13 12. September 2011 11:06

Re: [GELÖST] Ausklappmenü Formatierung?

#14 12. September 2011 11:19

Re: [GELÖST] Ausklappmenü Formatierung?

Fußzeile des Forums