w3.css从固定脚注下拉

Question

我在使用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>

它完全按照我想要的方式工作(它将下拉菜单放在按钮的正上方，按钮放在我想要的位置)，除了选项是不可见的(因为它们在页脚栏上方溢出)。

这是一个类似小提琴的链接，我把w3-dropdown-content的" bottom“属性改成了50%，这样你就可以看到菜单的底部了。https://www.w3schools.com/code/tryit.asp?filename=GCKK95EG0T44

提前感谢任何想要提供帮助的人:)

编辑:我还没有找到一种方法让它像我想要的那样显示出来。通过将w3-dropdown-hover元素的位置更改为absolute，下拉菜单将正确显示，但该项将添加到栏的左侧，而不是右侧。

Answer 1

好了，您回答了自己的问题: w3-bar中的属性"overflow“被定义为”隐藏“。你可以在"bottom:0“后面加上"overflow:visible”。