Hilfe: CSS Popup Menü will nich ganz so wie ich will...

[Kai-Christoph]

Hallo,

jetzt habe ich mich mal an ein kleines Stück CSS dran gewagt. Irgendwann muss ich es ja mal tun. Und aus gegebenem Anlass habe ich für einen Kunden ein keines Popup-Menü gebastelt.

Schaut es euch doch einfach mal an:
Homepage Geso

Ich habe jetzt drei Probleme:
1. beim Punkt "Unternehmenskommunikation" erscheint beim Berühren mit der Maus genau an der Stelle des "k" ein senkrechter 1 Pixel breiter weißer Strich. Woher kommt das Teil?

2. Ich habe es noch nicht geschafft die "Ausklapper" kleiner zu machen. Sie sind genau so breit wie das Hauptmenü, könnten aber ruhig schmaler sein.
Kann man die "Ausklapper" auch transparent erscheinen lassen?

3. Auf meinem Safari 1.3.2 sieht das Menü wunderbar aus, auf meinem Tiger-Safari 2.01, stimmt die Schriftgröße nicht mehr...

Ich bin mit meinem Latein jetzt quasi am Ende...

Bitte helft mir, bin für jeden Tipp dankbar!

KC

 

[Kai-Christoph]

Keiner eine Idee?

 

[acid]

Habs mir jetzt nicht 100%-ig Angeschaut, aber wäre es möglich, dass das Problem hier liegt:

	ul a {
		color: #333;
		text-decoration: none;
		display: block;
		padding:10px 5px 10px 10px;
		width: 155px;
		background: #FFF;
}

Du gibst ja praktisch die Breite vor, die ein Link in deiner unsortierten Liste haben darf. Setzt mal ein border: 1px solid #FF0000; in das Statement und prüfe dann, wo ob die breite nicht zufällig bei "Unternehmenskommuni" aufhört...

Das würde auch den weissen Rahmen erklären, da du ja als Hintergrundfarbe weiß angegeben hast

 

[Kai-Christoph]

Nee, daran hat es nicht gelegen.
Wenn ich den roten Rahmen um meine "Blöcke" habe, dann ist der genau so breit, wie die blauen Unterstriche...

Schaue ich mir die drei Abschnitte an, in denen es um Breiten geht:

ul {
list-style: none;
width: 200px;

Hier wird doch definiert, wie breit die Liste überhaupt ist, oder?

ul a {
color: #333;
text-decoration: none;
display: block;
padding:10px 5px 10px 10px;
width: 155px;
background: #FFF;

Und hier wird doch definiert wie der Text im Block steht, die Textfarbe und die Hintergrundfarbe. Aber was bewirkt hier die Breitenangabe?

ul li ul {
list-style: none;
position: absolute;
left: 130px;
top: 0;
display: none;
width: 100px;
border-left: 1px solid #FFF;

Und hier gehts dich um die "Ausklapper". Die zu ihrem Elternobjekt absolut auf 130px stehen. Und eigentlich sollten doese dann doch nur 100px breit sein... Das ist aber nicht der Fall.

Das kann doch eigentlich nicht so schwer sein, oder???

 

[Jakob]

Das sieht schon ganz gut aus. Dieser Artikel kümmert sich noch um die Kleinigkeiten, die bei solchen Menüs beachtet werden müssen. Bspw. funktioniert das so noch nicht im IE usw.

 

[Kai-Christoph]

Danke für den Tipp, den Link schau ich mir mal an.

Das mit der Breite habe ich jetzt hinbekommen.

Der richtige Befehl lautet:
ul ul a {width:90px;}

Irgendwann steig ich da auch komplett durch...