У меня проблемы с созданием выпадающего меню с помощью w3. css. То, что я пытаюсь сделать, это иметь раскрывающееся меню в качестве второго элемента справа в нижнем колонтитуле, прикрепленного к нижней части области просмотра.
Вот что у меня есть:
<footer class="w3-bar" style="position: fixed; bottom: 0;">
<span class="w3-bar-item">Button 1</span>
<span class="w3-bar-item">Button 2</span>
<span class="w3-bar-item w3-right">(Date Here)</span>
<div class="w3-dropdown-hover w3-right" style="position: relative; bottom: 0;">
<button class="w3-bar-item w3-button w3-hover-theme">Change Theme</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-d4" style="min-width: 100%; right: 0; bottom: 100%;">
<a href="#" class="w3-bar-item w3-button">Theme 1</a>
<a href="#" class="w3-bar-item w3-button">Theme 2</a>
<a href="#" class="w3-bar-item w3-button">Theme 3</a>
<a href="#" class="w3-bar-item w3-button">Theme 4</a>
</div>
</div>
</footer>
Он работает точно так, как я хочу (он помещает раскрывающееся меню прямо над кнопкой, которая находится там, где я хочу), за исключением того, что параметры не отображаются (поскольку они переполняются над панелью нижнего колонтитула) .
Вот ссылка на похожую на скрипку вещь, я изменил свойство "bottom" моего w3-dropdown-content на 50%, чтобы вы могли видеть нижнюю часть меню. https://www.w3schools.com/code/tryit.asp?filename=GCKK95EG0T44
Заранее спасибо всем, кто попытается помочь:)
Редактировать: Я до сих пор не нашел способ показать это как я хочу. При изменении положения моего элемента w3-dropdown-hover на абсолютное, раскрывающееся меню отображается правильно, но элемент добавляется слева от панели, а не справа.