HTML内容不可见

2019年7月28日 172次阅读

我正在尝试在我的网站上创建一个下拉按钮,但它只是想因某些原因而保持隐身状态.当我从浏览器检查页面并将鼠标悬停在提到的内容上时,边界和位置按照预期的方式标记,但不知何故没有呈现

这是
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;

最佳答案 您的代码正常运行,请参阅下文.

也许你不能“看到”元素,因为它继承了那种颜色：白色……？您是否定义了除白色之外的背景颜色？

.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>
点赞