Wie öffnen inneren Links auf rechte Seite in block

[liebewinter]

hallo , ich habe diese Website ,wenn der maus auf den Wort Computer legst , wird die inneren Links in block geöffnet , aber ich will das er auf rechte Seite in block geöffnet wird... ,ich habe versuche mit : inline-block ,inline-grid , inline-table aber bleibt alles gleich , nur verendärt mit inline-flex aber er wird nicht geöffnet in block... . ich habe alle versuche in

.dropdown:hover .dropdown-content {
    display: inline-block;
}

[Gunnar Bittersmann]

@@ liebewinter

ich habe diese Website ,wenn der maus auf den Wort Computer legst

Und wenn ein Nutzer gar keine Maus hat? Sondern per Tastatur navigiert? Dann öffnet sich kein Untermenü. Deine Navigation funktioniert nicht.

Deinen anderen Postings entnehme ich, dass du Anfänger bist. Eine Drop-Down-Navigation hinzubekommen ist nichts für Anfänger.

Und bei so wenigen Menüpunkten brauchst du keine Drop-Down-Navigation.

LLAP 🖖

[liebewinter]

Und bei so wenigen Menüpunkten brauchst du keine Drop-Down-Navigation.

aber ich möchte mehr Menus anlegen....

Und wenn ein Nutzer gar keine Maus hat? Sondern per Tastatur navigiert? Dann öffnet sich kein Untermenü. Deine Navigation funktioniert nicht.

Erste möchte ich meine Website fertig machen , dann möchte auf diesen sachen mich kümmiere.. , aber danke über diese probleme , habe ich auf ihn nicht gedacht…

aber für jetzt habe eine lösung gefunde.…

dropdown:hover .dropdown-content {
    display: block;
	  left: 103px;
    top: 214px;
}

Und wenn ein Nutzer gar keine Maus hat?

was würdest du mich empfiehlt für Maus ?

[beatovich]

hallo

was würdest du mich empfiehlt für Maus ?

:focus und :focus-within sind geeignete Selektoren.

Allerdings darfst du dann nicht mit display:none arbeiten.

[liebewinter]

Allerdings darfst du dann nicht mit display:none arbeiten.

welche ** display:none** sagst du ?, ich habe viele gschrieben... meinst du der auf zeile 135 steht ?? und wenn none nicht schreibe kann , was kann schreibe ?

.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 160px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

und vielen Danks für deine hilfe !

[beatovich]

hallo

Allerdings darfst du dann nicht mit display:none arbeiten.

welche ** display:none** sagst du ?, ich habe viele gschrieben... meinst du der auf zeile 135 steht ?? und wenn none nicht schreibe kann , was kann schreibe ?

.dropdown-content {
    display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
    position: absolute; /* die stellung folgt der Erste Link(li) */
    background-color: #f1f1f1 ;
    min-width: 160px; /* macht größer die Inneren Links */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
    z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */

und vielen Danks für deine hilfe !

Ein Element, das mit display:none ausgeblendet wird, kann keinen Focus erhalten. Es ist demnach nicht möglich, mit

.outer:focus-within .inner-el {display:block /*or whatever */}

ein Einblenden zu bewirken.

Abhilfe ist, ein Element nur visuell auszublenden.

eltotemporalilyhide {
  width:0; height:0; overflow:hidden; padding:0; border:0;
}

[Gunnar Bittersmann]

@@beatovich

:focus und :focus-within sind geeignete Selektoren.

Allerdings darfst du dann nicht mit display:none arbeiten.

?? Wieso nicht? Das Beispiel von Una Kravets funktioniert auch mit display: none. (Artikel Dropdown Menus)

LLAP 🖖

[beatovich]

hallo

@@beatovich

:focus und :focus-within sind geeignete Selektoren.

Allerdings darfst du dann nicht mit display:none arbeiten.

?? Wieso nicht? Das Beispiel von Una Kravets funktioniert auch mit display: none. (Artikel Dropdown Menus)

ja man kann zufälligerweise in dieser Umgebung.

Die Frage ist nur, was passiert in dem Moment wo du den fokus vom Label auf den ersten fokusierbaren Untermenu-Eintrag verschiebst? Wird da immer focus-within zutreffen? Ich würde nicht darauf wetten wollen.

[marctrix]

Hej liberwinter,

hallo , ich habe diese Website ,wenn der maus auf den Wort Computer legst , wird die inneren Links in block geöffnet , aber ich will das er auf rechte Seite in block geöffnet wird…

Mein Tipp: nimm erst mal etwas fertiges. Flexnav ist ganz gut, auch was die Zugänglichkeit angeht. Leider benötigt sie jquery. Wenn du das ohnehin in deinem Projekt einsetzt, macht das keinen Unterschied. Sonst wäre es vermutlich besser etwas anderes zu nehmen.

Übrigens waren Navigationen gerade in letzter Zeit hier im Forum immer wieder ein Thema: vielleicht ist unter den hier vorgestellten Lösungen etwas für dich dabei (edit beispielsweise die [Navigation von @beatovich](https://beat-stoecklin.ch/nav_demo.html#f1) .

Wenn du dich mit css besser auskennst, kannst du dich immer noch an eigenen Lösungen probieren.

Marc

[beatovich]

hallo

Übrigens waren Navigationen gerade in letzter Zeit hier im Forum immer wieder ein Thema: vielleicht ist unter den hier vorgestellten Lösungen etwas für dich dabei (edit beispielsweise die [Navigation von @beatovich](https://beat-stoecklin.ch/nav_demo.html#f1) .

Zur Demo:

• Tests für Safari und MSIE stehen noch aus.
• Ich habe ein details-polyfill für MSIE eingefügt.

Aber danke für die Erwähnung, vielleicht gibt's Rückmeldungen.

[marctrix]

Hej beatovich,

Zur Demo:

• Tests für Safari und MSIE stehen noch aus.
• Ich habe ein details-polyfill für MSIE eingefügt.

Aber danke für die Erwähnung, vielleicht gibt's Rückmeldungen.

Brauchst du noch welche? — Ich kann wie gesagt nur mit Tests dienen, nciht mit Lösungen für JS-Probleme…

Marc

[marctrix]

Hej marctrix,

Zur Demo:

• Tests für Safari und MSIE stehen noch aus.

Im safari unter MacOs scheint es zu funktionieren - wäre vielleicht gut mal tatsächlich auf eine andere (Test-) Seite zu verlinken.

Marc

[beatovich]

hallo

• Tests für Safari und MSIE stehen noch aus.

Im safari unter MacOs scheint es zu funktionieren - wäre vielleicht gut mal tatsächlich auf eine andere (Test-) Seite zu verlinken.

Danke, genau solche Meldungen brauche ich.

Im übrigen kann man Bugs auch auf https://wiki.selfhtml.org/wiki/Benutzer:Beatovich berichten.

[marctrix]

Hej beatovich,

• Tests für Safari und MSIE stehen noch aus.

Im safari unter MacOs scheint es zu funktionieren - wäre vielleicht gut mal tatsächlich auf eine andere (Test-) Seite zu verlinken.

Danke, genau solche Meldungen brauche ich.

Im übrigen kann man Bugs auch auf https://wiki.selfhtml.org/wiki/Benutzer:Beatovich berichten.

Interessant. — Aber außer dem Problem mit dem Safari unter iOS habe ich keine zu melden…

Marc

[liebewinter]

Danke für deine empfiehlst ,aber ich möchte weiter so machen , ich hoffe die eine lösung für meine probleme bekommen..., beispiel , mit Firefox Browser sehe sie Gut , aber wenn sie sehen auf eine Chrome Browser , bekomme diese probleme...

[liebewinter]

ich habe das probleme gefunde.... auf der id #externalLinks a ...

#externalLinks a	{
	
  text-decoration: none;
	display: block;
	text-align: center;
	padding: 2px;
  font-size: 17px;
	font-family:  Candara, Calibri, Segoe, Optima, sans-serif;
}

wenn ich habe padding: 2px; gelöst , bekomme nicht mehr das....