創建dropup菜單？

我正在創建此網站：http://google1.php5.cz/index.html，我需要我的菜單彈出式菜單。創建dropup菜單？

我想創建這個：如果我將鼠標指向單詞「ABOUT」，將彈出菜單，並且會出現3個選項：類似於http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button，但倒過來。

問題是（就像你可以在頁面上看到的）我不知道如何有彈出塊只要「關於」塊？

此外，我無法使用JavaScript。

來源

2016-06-19 Michael Florian

如果您不能使用Javascript，那麼您可以使用CSS bottom屬性向上推下拉列表，使其具有「dropup」效果。

這裏有一個JS fiddle，這裏的示例代碼是一樣的W3Schools的鏈接，您提供，具有以下增加：

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

來源

2016-06-19 23:07:42

在W3學校例如添加底部：100％;屬性爲：

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

將使菜單向上打開。

它應該是這樣的：

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

來源

2016-06-19 23:09:52 RomanK

很簡單。只是執行以下2次修改：

添加「底部：100％」來.dropdown內容在CSS文件扭轉彈出菜單

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

更改「最小的方向-width：160像素」到‘最小寬度：100％’，以使‘長坡平了塊的‘關於’塊’

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

來源

2016-06-19 23:31:58

謝謝你做的一切！ –

歡迎您！ –

創建dropup菜單？

回答

相關問題