HTML 内容不可见

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>

只显示类为“basic”的链接。其余的不渲染。这是它附带的 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>