Drop-up-Menü erstellen?

Question

Ich erstelle diese Website: http://google1.php5.cz/index.html und ich brauche für mein Menü Popup-Menü.

Ich möchte dies erstellen: wenn ich meine Maus auf das Wort "ABOUT" zeigen wird das Menü auftauchen und es wird wie 3 Möglichkeiten: so etwas wie http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button aber auf den Kopf gestellt.

Das Problem ist (wie Sie auf der Seite sehen können) Ich kann nicht herausfinden, wie man den Popup-Block haben, solange der "ABOUT" -Block?

Auch kann ich JavaScript nicht verwenden.

Answer 1

Wenn Sie kein Javascript verwenden können, können Sie das Attribut CSS bottom verwenden, um die Dropdown-Liste nach oben zu verschieben, um einen "drop-up" -Effekt zu erhalten.

Hier ist ein JS fiddle, wo der Beispielcode ist die gleiche wie die w3schools Sie bieten verknüpfen, mit folgendem Zusatz:

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    bottom: 50px; 

}

https://jsfiddle.net/2vuact43/

Answer 2

Im W3 Schools Beispiel das Hinzufügen der Boden: 100%; Attribut zu:

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

Wird das Menü nach oben öffnen.

Es sollte wie folgt aussehen:

.dropdown:hover .dropdown-content { 
    display: block; 
    bottom: 100%; 
} 

Answer 3

Sehr einfach. Nur die folgenden zwei Änderungen:

1. Add "unten: 100%" .dropdown-Inhalte in CSS-Datei, die Richtung des Pop-up-Menü

   .dropdown-content { 
        bottom:100%; <!-- <<<THIS WILL MAKE THE MENU OPEN UP INSTEAD OF OPENING DOWN --> 
   
        display: none; 
        position: absolute; 
        background-color: #f9f9f9; 
        min-width: 160px; 
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
       } 
   

2. Ändern Sie den „min zu umkehren -breite: 160px“auf "min-width: 100%" zu machen, "der Block poping, solange die "über" Block"

   .dropdown-content { 
        bottom:100%; 
        display: none; 
        position: absolute; 
        background-color: #f9f9f9; 
   
        min-width: 100%; <!-- <<<THIS WILL MAKE THE POP UP BLOCK AS WIDE AS THE BUTTON --> 
   
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
       }