Question

我正在尝试在我的网站上创建一个下拉按钮，但出于某种原因，它只是想保持隐藏状态。当我从浏览器检查页面并将鼠标悬停在提到的内容上时，边界和位置被标记为预期的方式，但是以某种方式未呈现任何内容这是HTML：

<span class="dropdown">
    <a class="basic" href="documents.php">Documents</a>
    <span class="dropdown-content">
        <a href="documents.php">BUTTON</a>
        <a href="documents.php">BUTTON</a>
        <a href="documents.php">BUTTON</a>
    </span>
</span>

仅显示“基本”类的链接。其余的不渲染。那是附带的CSS：

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:rgb(70,90,120);
    width:100%;
}

.dropdown-content a {
    display: block;
    font-size:200%;
}

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

这些是继承的样式：

text-align: center;
color: white;
font-family: Helvetica;

Answer 1

您的代码正在运行，请参见下文。

也许您无法“看到”该元素，因为它继承了color:white ..？您要定义白色以外的背景颜色吗？

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color:rgb(70,90,120);
    width:100%;
}

.dropdown-content a {
    display: block;
    font-size:200%;
}

.dropdown:hover .dropdown-content {display: block;}

<span class="dropdown">
    <a class="basic" href="documents.php">Documents</a>
    <span class="dropdown-content">
        <a href="documents.php">BUTTON</a>
        <a href="documents.php">BUTTON</a>
        <a href="documents.php">BUTTON</a>
    </span>
</span>

Answer 2

我发现了问题...我的标头标签中有此菜单，并且在标头CSS中已设置

overflow: hidden;

由于某种原因...我应该检查一下。谢谢大家的帮助！

HTML内容不可见

2 个答案: