Создание выпадающего меню?

Question

Я создаю этот сайт: http://google1.php5.cz/index.html и мне нужно для моего меню всплывающее меню.

Я хочу создать это: если я укажу свою мышь на слово «О», появится меню, и там будет как 3 варианта: что-то вроде этого http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button, но вверх ногами.

Проблема (как вы можете видеть на странице) Я не могу понять, как иметь всплывающий блок, пока блок «О ПРО»?

Кроме того, я не могу использовать JavaScript.

Answer 1

Если вы не можете использовать 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/

Answer 2

В примере W3 Schools добавления дно: 100%; атрибут:

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

Откроется меню вверх.

Он должен выглядеть следующим образом:

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

Answer 3

Очень простой. Просто выполните следующие 2 модификации:

1. Добавить «Дно: 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); 
       } 
   

2. Смените «мин -ширина: 160px»до„мин-ширина: 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); 
       }