Position eines klickbaren Dropdown-Menüs

Question

Ich verwende einen ersten mobilen Ansatz, um eine responsive Website zu erstellen. Ich arbeite gerade an meinem Navigationsmenü und bin damit auf dem Handy zufrieden (obwohl es bei weitem nicht perfekt ist). Wenn ich jedoch mein Navigationsmenü für die Verwendung im Internet gestalte, kann ich meinen Dropdown-Inhalt nicht unter dem Element in meinem Menü positionieren. Es taucht derzeit in der oberen linken Ecke auf.

Ich verwende jQuery, um mein anklickbares Menü zu erstellen (weiß nicht, ob das relevant ist).

Ich habe auch einen Bug auf dem Handy, wo ich das Dropdown nicht schließen kann, nachdem ich es wieder geöffnet habe. Wenn jemand dafür auch eine Antwort hat, wäre das großartig, aber ich bin vorerst damit zufrieden.

Jede Hilfe wird sehr geschätzt, danke :)

Answer 1

Nicht ein perfektes Beispiel, aber Sie sind am besten zu Ihrer Verwendung von Schwimm- und ersetzt mit einem Display Ansatz führten aus zu entfernen.

Etwas in diese Richtung:

@media only screen and (min-width: 900px) { 
    nav > a, .dropNav, nav > div { 
     display: inline; 
     position: relative; 
    } 

    .dropList { 
     left: 0; 
     right: 0; 
     display: none; 
     position: absolute; 
     background-color: #f9f9f9; 
     min-width: 160px; 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     z-index: 1; 
     padding-left: 0; 
    } 
} 

Beispiel: https://jsfiddle.net/davcpas123/mjukghz6/1/

Das ist etwas ähnlich wie dies erreichen wird: