CSS-Problem mit Dropline-Menü...

**phyton2706** · 20.01.2010, 16:07

Hallo zusammen!

Ich komme mal wieder nicht weiter mit einem Menü...

Ich habe anhand des auf der Typolight-Seite verwendeten Menüs eine Dropline-Version angepasst.

Hier mal ein Ausschnitt, wie es mal aussehen soll:

Hier ein Ausschnitt, wie ich es bisher hinbekommen habe:

An folgenden Punkten verzweifle ich gerade:
1. Der aktive Menüpunkt soll ein negatives Hintergrundbild bekommen und eine weiße Schrift…
- der Austausch des Hintergrundbilds klappt, nur wird die Schrift nicht weiß…

2. Transparenz für das 2. Level (Transparenzwert von 60%)
- bei hover und active soll keine Transparenz mehr zu sehen sein…

3. Activer Menüpunkt aus Level 2 s. hier:

- das 2. Level soll bei jedem Punkt aus dem linken Menü stehen bleiben…

Das ist der betreffende CSS-Code:

Code:

/* Dropdown Menü */

#dropdown {
  margin-top: 10px;
  padding: 0;
  background: #808080 url("../bilder/nav/nav.png") repeat-x;
}
#dropdown li {
  float: left;
  padding: 0;
  line-height: 1;
}
#dropdown a, #dropdown span {
  display: block;
  padding: 7px 15px 7px 15px;
  text-decoration: none;
  font-size: 120%;
  font-weight: bold;
  color: #000;
  border-right: #000 2px solid;
}
#dropdown a:hover, #dropdown span:hover {
  color: #fff;
}
#dropdown span {
  cursor: default;
}
#dropdown li:hover, #dropdown li.active, #dropdown li.trail {
  background: transparent url("../bilder/nav/nav_akt.png") repeat-x;
  color: #fff;
}
#dropdown ul.level_2 {
  width: auto;
  left: -999em;
  position: absolute;
  padding: 0;
  z-index: 10;
}
#dropdown ul.level_2 li {
  position: relative;
  float: left;
  background: #808080;
}
#dropdown ul.level_2 a, #dropdown ul.level_2 span {
  font-size: 12px;
  width: auto;
  color: #000;
}
#dropdown ul.level_2 li:hover, #dropdown ul.level_2 li.active, #dropdown ul.level_2 li.trail {
  background: #c0c0c0;
  filter: alpha(opacity=100); /* für IE */
  -moz-opacity: 1.0; /* Mozilla */
  opacity: 1.0;
  color:#000;
}
#dropdown ul.level_2 li:hover a, #dropdown ul.level_2 li.active a, #dropdown ul.level_2 li.trail a, #dropdown ul.level_2 li:hover span, #dropdown ul.level_2 li.active span, #dropdown ul.level_2 li.trail span {
  background: #c0c0c0;
  filter: alpha(opacity=100); /* für IE */
  -moz-opacity: 1.0; /* Mozilla */
  opacity: 1.0;
  color:#000;
}
#dropdown li:hover ul.level_2 {
  left: 0;
  width: 100%;
  background: #808080;
  filter: alpha(opacity=60); /* for IE */
  -moz-opacity: 0.6; /* for Mozilla */
  opacity: 0.6;
}
/* #submenu ul.level_1 {
   border-top:1px dotted #bbb; 
}
*/
#submenu a, #submenu span {
  display: block;
  text-decoration:none;
}
#submenu a:hover {
  text-decoration: underline;
}
#submenu a.trail {
  color: red;
}
#submenu .level_2 li {
  padding-left: 18px;
}

Ich hoffe ich konnte mich so halbwegs verständlich ausdrücken…

**MacKP** · 20.01.2010, 18:44

Hallo phyton2706,
auf dem Trockenen ist CSS immer so ne Sache...
Eventuell hilft es bei der schwarzen schrift das hier zu setzen -> #dropdown li.trail span

Du möchtest, das die Untermenüs stehen bleiben bei den Seiten wo man gerade ist?
Das kann man ganz gut machen, allerdings bekommst du dann massive Probleme mit deiner Durchsichtigkeit, da das hovern dann ja immer noch funktionieren muss und sich diese Menüpunkte dann darüber legen..
Hier aber mal ne Technik wie das funktioniert -> http://www.alistapart.com/articles/hybrid/
Ist an sich relativ simpel gemacht. Aber auch sehr wirkungsvoll ;-)

Viele Grüße

**phyton2706** · 26.01.2010, 06:42

Hallo MacKP,

vielen Dank für Deine Antwort.
Ich habe jetzt schon fast eine Woche daran "rum"gedoktoert", komme aber nicht weiter... Irgendwie stehe ich auf dem Schlauch...

Ich werde die Seiten später mal auf einen Test-Server laden, vielleicht könntest Du dir das ganze dann nochmal ansehen...

LG

**phyton2706** · 26.01.2010, 15:23

Man, was für ein Tag...

Aber jetzt habe ich es endlich geschafft die Seite hochzuladen...

Hier könnt Ihr euch mein bisheriges Werk ansehen:
http://is.gd/75h0O

Das ist nur ein erster Entwurf!

LG

***alex*** · 26.01.2010, 18:52

Hallo phyton2706,

du hast dem den aktiven Menüpunkt versucht so zu formatieren:

Code:

#dropdown li:hover, #dropdown li.active, #dropdown li.trail {
background:url("../bilder/nav/nav_akt.png") repeat-x scroll 0 0 transparent;
color:#FFFFFF;
}

Innerhalb des Listenpunktes <li> ist aber noch ein <a..> mit dem Menüpunkt, der wie folgt formatiert ist:

Code:

#dropdown a, #dropdown span {
border-right:2px solid #000000;
color:#000000;
display:block;
font-size:120%;
font-weight:bold;
padding:7px 15px;
text-decoration:none;
}

Mache mal eine CSS-Definition:

Code:

#dropdown a.trail {
color:#ffffff;
}

Dann sollte Dein Problem im 1. Menüpunkt erledigt sein.

***alex*** · 26.01.2010, 19:31

Mein Post vorher bezog sich auf den Menüpunkt, wenn im submenue ein Navigationpunkt aktiv ist.

Für den aktiven Menüpunkt ohne aktivirten Submenue-Punkt brauchst Du:

Code:

#dropdown span  {
color:#ffffff;
}

**phyton2706** · 27.01.2010, 06:45

Hallo alex,

kalsse Tipp! Damit hat sich der erste Punkt erledigt!

Meine 2. Frage wg. der Transparenz hat sich erledigt, hier ist auch eine Transparenz gewünscht...

Aber der 3. Punkt, der ist noch sehr wichtig... Aber alle meine bisherigen Versuche das Menü sichtbar zu lassen, sind bisher fehlgeschlagen...

LG

***alex*** · 27.01.2010, 07:01

Ist doch kein Problem:

Code:

#dropdown .trail ul.level_2 {
left:0;
}

**phyton2706** · 27.01.2010, 09:07

Super, danke!

Diese Variante hatte ich anscheinend noch nicht ausprobiert...

Jetzt besteht nur noch ein Problem...

Wenn der Menüpunkt "Leistungen -> Präsentationen" aktiv ist, und ich die Maus über den Punkt "Aktuelles" setze, dann sollte der aktive Menüpunkt verschwinden...

Hast Du dafür evtl. auch eine Lösung?

LG