css navigationsproblem

[mauci]

Liebe Leute,

ich steh grad völlig auf der Seife und komm kein Stück weiter. Vielleicht kann mir jemand schnell mal nen Tipp geben...
Ich will bei diesem Menü, dass der schwarze rollover Unterstrich auch stehen bleibt, wenn ich über die Untermenüpunkte des dropdown drüberfahre. Die Untermenüpunkte sollen aber keinen Strich bei rollover bekommen.

Müsste doch mit css gehen, dass ich das irgendwie trenne.....?

Danke für jeden Anstoß!
mauc

[pixelslave]

ei ei ei :-)

anstatt ul.navi li a:hover schreibst du ul.navi li:hover a

dort packst du deine Regel rein das der Anker-Tag seinen unteren Rahmen bekommt.

Wieso brauchst du jquery und überhaupt js für so ein Menü?
Das ist wie Poster aufhängen mit Schlagbohrer

Grüße

[mauci]

danke erstmal!
wenn ich ich das so mache, bekommen aber alle punkte (auch die unterpunkte) einen schwarzen unterstrich, wenn ich über den hauptpunkt rolle. die sollen aber nie einen unterstrich bekommen....

jQuery nehm ich, weil die unterpunkte ein und ausfaden sollen. da hab ich nichts besseres gefunden.....

[thomas_E]

statt
ul.navi li a:hover

ul.navi li:hover > a
ist aber nicht ganz Browserkompatibel

ul.navi li:hover a
wirkt sich auf die unterelemente aus
alte IEs können :hover nur auf links (a-Tag mit href)

oder dem main-Link eine Klasse zuordnen und nutzen
ul.navi li:hover a.naviMainLink
immer noch das problem mit alten IEs

edit: seh grad, du nutzt eh JS um das menü ein-/auszublenden dann kannst du da auch direkt eine Klasse auf den link setzen/entfernen, und :hover komplett weglassen

wenn ich ich das so mache, bekommen aber alle punkte (auch die unterpunkte) einen schwarzen unterstrich, wenn ich über den hauptpunkt rolle. die sollen aber nie einen unterstrich bekommen....

dann wirst du die weiter verschachtelten css-regeln wohl so anpassen müssen, dass sie das halt wieder aufheben

viele Möglichkeiten; alles hat seine vor- und nachteile

[pixelslave]

Zitat von mauci

danke erstmal!
wenn ich ich das so mache, bekommen aber alle punkte (auch die unterpunkte) einen schwarzen unterstrich, wenn ich über den hauptpunkt rolle. die sollen aber nie einen unterstrich bekommen....

jQuery nehm ich, weil die unterpunkte ein und ausfaden sollen. da hab ich nichts besseres gefunden.....

das ist auch korrekt so - hätte ich noch dazu sagen müssen das jeder Anker-Tag diese regel übernimmt - sorry.

ul.navi li:hover li a und deaktivier dort deinen border.

ul.navi li:hover > a müsste auch gehen für die erste Regel die ich dir gesagt habe. Ich weiß im Moment aber nicht in wie weit el > el "crossbrowser-compliant" ist.

Ansonsten würde ich dir empfehlen solche Menüs ohne jQuery zu realisieren. Fade in Fade out finde ich pers. sehr störend bei Menüs. Zugriff dauert zu lange und der Effekt ist nur beim ersten Mal toll, danach nervts.

Und 31 KB für nur diesen einen Effekt

[mauci]

danke euch beiden! hat mir beides sehr geholfen. wie wird dieses ">" in css bezeichnet? hab noch nie damit zu tun gehabt und würde gern nachgoogeln. aber unter welchem begriff?

das mit dem jQuery menü stimmt natürlich. ist auch nicht meine idee. auf der anderen seite sind 31 kb bei den heutigen verbindungen einfach gar nichts. und da später noch etwa 30 fotos auf die seite kommen sollen, würden die 31 kb js eh nicht ins gewicht fallen....
aber grundsätzlich ist die kritik natürlich berechtigt.

danke!
mauc

[thomas_E]

wie wird dieses ">" in css bezeichnet? hab noch nie damit zu tun gehabt und würde gern nachgoogeln. aber unter welchem begriff?

auf css4you nennen sie ihn childselector, ob das der geläufige Name dafür ist. kp. aber er passt

Ich weiß im Moment aber nicht in wie weit el > el "crossbrowser-compliant" ist.

also, zumindest laut der Übersicht auf css4you durchgängig (oder muss man IE6 immer noch ernsthaft berücksichtigen)

[mauci]

sorry.... muss nochmal kurz stören. da ich grad zwei css spezialisten dran hab....

das menü funktioniert nun perfekt, allerdings hab ich im IE7 ein weiteres problem, das ich nicht in den griff kriege. wenn ich mit der maus zwischen die untermenüpunkte fahre, blendet das submenü aus. auch wenn ich dem ul des submenüs eine breite und höhe und ein block display gebe, sind da nur die menüpunktwörter sensitiv. wie bleibt das ganze submenü aktiv, wenn ich zwischen den einzelnen submenüpunkten hin und herfahre....?

nochmals vielen dank!
mauc

[pixelslave]

A List Apart: Articles: Suckerfish Dropdowns

Mir ist der Begriff vorhin nicht eingefallen. Was du suchst ist ein "Suckerfish-Dropdown" Menü

Grüße

Martin

[mauci]

danke für den tipp! der suckerfish löst die IE probleme mit js. ich dachte, dass das mir css gehen müsste, aber wenn doch nicht, bau ich das ganze eben auf suckerfish um. weiß nur noch nicht, wie ich das dann mit jQuery verknüpfe. mal sehen.....

[pilzebub]

verwende mal "clear:left" anstelle von float:none(das gibts glaube auch
garnicht) und setze mal nach der liste vom submenue noch eine "clear:both"

wenn du die border der li-tags mal rot machst wirst du im IE einen dicken
roten rand oberhalb des submenue haben und das liegt daran das der
li-container gefloated wurde und das am ende der liste nicht wieder
aufgehoben wurde...

ich geh jetzt einfach mal davon das ich richtig liege

[pixelslave]

Zitat von pilzebub

verwende mal "clear:left" anstelle von float:none(das gibts glaube auch
garnicht) und setze mal nach der liste vom submenue noch eine "clear:both"

wenn du die border der li-tags mal rot machst wirst du im IE einen dicken
roten rand oberhalb des submenue haben und das liegt daran das der
li-container gefloated wurde und das am ende der liste nicht wieder
aufgehoben wurde...

ich geh jetzt einfach mal davon das ich richtig liege

also das hättest du dir sparen können

float:none gibt es sehr wohl
clear:left hebt float:left auf

Zumindest ist deine letzt Vermutung ansatzweiße korrekt

CSS gehört für jeden Webentwickler zur Basis, das wird ja auch in Flash verwendet - wenn auch etwas anders - ich empfehle euch wirklich da schnellstens zumindest die Grundkenntnisse zu lernen

Grüße

Martin

[pilzebub]

ja float:none jibts auch(hab ich gerade gelesen), aber das hilft bei dem
problem auch nicht, dass das submenue verschwindet beim hovern... und
bevor du mich hier anmotzt schau dir bitte mal den code an, ich sehe da nix
mit clear:left...

[mauci]

nicht streiten wegen mir


ich hab jetzt selber eine lösung gefunden. wenn ich dem sub li nicht nur eine fixe größe (height, width) gebe, sondern auch noch eine hintergrundfarbe (oder ein transparentes hintergrund-gif), packts auch der IE7. find ich zwar absurd, aber bitte.
so geht's jetzt.

das mit dem * anstatt ul.navi li a:hover schreibst du ul.navi li:hover a * lässt mich übrigens immer noch grübeln. mir ist nicht klar, warum sich das unterschiedlich auswirkt. und zum ersten mal frage ich mich, welche funktion eigentlich der doppelpunkt hat......

das wichtigste ist aber, dass alles funktioniert.

danke nochmal!
mauc

[shin10]

ul.navi li a:hover

Effekt tritt am link (a) auf, wenn du über dem Link (a) bist

schreibst du ul.navi li:hover a *

Effekt tritt am link (a) auf, wenn du über dem Listelement (li) bist, also auch, wenn der link kleiner, als das Listelement ist.

mfg

sx