liebewinter: Wie öffnen inneren Links auf rechte Seite in block

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;
}

  1. @@ 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 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. 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 ?

      1. 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.

        --
        Neu im Forum! Signaturen kann man ausblenden!
        1. 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 !

          1. 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;
            }
            
            --
            Neu im Forum! Signaturen kann man ausblenden!
        2. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. 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.

            --
            Neu im Forum! Signaturen kann man ausblenden!
  2. 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

    1. 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.

      --
      Neu im Forum! Signaturen kann man ausblenden!
      1. 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

        1. 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

          1. 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.

            --
            Neu im Forum! Signaturen kann man ausblenden!
            1. 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

    2. 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...

      1. 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....