Submenü einblenden

[Sabrina]

Ich möchte ein Submenü welches im nachfolgenden Quelltext mit Sublevel definiert ist einblenden lassen wenn mann mit der Maus über das Mainmenü geht...was hab ich verkehrt gemacht?

.mainlevel {

font-family      : Arial, Helvetica, serif;
  font-weight      : normal;
  width            : 95%;
  text-align       : left;
  letter-spacing   : 0 px;
  text-indent      : 5px;
  padding          : 5px;
  display          : block;
  margin-top       : 2px;

}

a.mainlevel:link, a.mainlevel:visited {
  border-top       : 1px solid #1C4781;
  border-bottom    : 1px solid #1C4781;
  background       : #1C4781;
  color            : #FFFFFF;
}
a.mainlevel:hover {
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #FFFFFF;
  text-align       : left;
  background       : #9D080A;
  color            : #FFFFFF;
  display          : .sublevel;

}

a.mainmenu:link, a.mainmenu:visited
{ color: #9D080A; font-weight: bold;
} a.mainmenu:hover,
{ color: #000000; text-decoration: underline; }

.sublevel {

font-family      : Arial, Helvetica, serif;
  font-weight      : normal;
  width            : 80%;
  text-align       : left;
  letter-spacing   : 0 px;
  text-indent      : 5px;
  padding          : 5px;
  display          : block;
  margin-top       : 2px;

}

a.sublevel:link, a.sublevel:visited {
  border-top       : 1px solid #1C4781;
  border-bottom    : 1px solid #1C4781;
  background       : #1C4781;
  color            : #FFFFFF;
}
a.sublevel:hover {
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #FFFFFF;
  text-align       : left;
  background       : #9D080A;
  color            : #FFFFFF;
  display          : sublevel;

}

a.submenu:link, a.submenu:visited
{ color: #9D080A; font-weight: bold;
} a.submenu:hover,
{ color: #000000; text-decoration: underline; }

[Ingo Turski]

Hi,

Du solltest Dich zunächst mit den grundlegenden Eigenschaften von CSS vertraut machen, denn dann känmst Du auch nicht auf so absurde Fantasien:

display          : .sublevel;

Davon abgesehen: es ist mit CSS alleine nur in modernen Browsern möglich. Insbesondere im IE funktioniert das nur mit Javascript und das kann deaktiviert sein...

freundliche Grüße
Ingo

[Maxx]

Hallo Sabrina,

a.sublevel:hover {
...
  display          : sublevel;

Eine nette Idee, aber das klappt so nicht.
Ich empfehle dir: [http://www.howtocreate.co.uk/tutorials/testMenu.html@title=Pure CSS Menus]

HTH

Jochen

[Ingo Turski]

Hi,

Eine nette Idee, aber das klappt so nicht.
Ich empfehle dir: [http://www.howtocreate.co.uk/tutorials/testMenu.html@title=Pure CSS Menus]

so aber auch nicht, wenn im IE Javascript deaktiviert ist...

freundliche Grüße
Ingo

[Maxx]

Hi Ingo,

so aber auch nicht, wenn im IE Javascript deaktiviert ist...

jein, auch mit abgeschaltetem javascript im IE sind die Inhalte zugänglich. Außerdem habe ich auch nie behauptet "es funktioniert" Ich habe lediglich darauf hingewiesen, dass Sabrinas Ansatz nicht funktioniert.

Grüße,

Jochen

[Ingo Turski]

Hi,

jein, auch mit abgeschaltetem javascript im IE sind die Inhalte zugänglich.

nein, jedenfalls nicht in diesem Beispiel. Sie wären zugänglich, wenn nicht im IE-Style stehen würde:

ul.makeMenu ul {  /* copy of above declaration without the > selector */
display: none; position: absolute; top: 2px; left: 78px;
}

sondern auch dies über Javascript realisiert würde, wie ich es in meinem neuen Tip mal demonstriert habe.

freundliche Grüße
Ingo

[Jörg Peschke]

Tach,

a.mainlevel:hover {
  border-top       : 1px solid #FFFFFF;
  border-bottom    : 1px solid #FFFFFF;
  text-align       : left;
  background       : #9D080A;
  color            : #FFFFFF;
  display          : .sublevel;

Ich glaube nicht, dass Du Display einfach eine andere CSS-Klasse zuweisen kannst, das erlaubt afaik nur "block", "inline" und "none".
Aber was gehen könnte (sofern dein Sublebel innerhalb deines Mainlevel liegt):

a.mainlevel:hover .sublevel {display: block}

(oder inline, hängt bissi von deinem layout ab)
Dann wird sublebel dann angezeigt, wenn es sich innerhalb einer Klasse namens a.mainlevel befindet, aber nur,  wenn du drüberhoverst.

Könnte klappen, habs aber nicht probiert.