css 属性显示 none 和块如何在 html 文件中工作？

Question

这是我的代码，运行很好，但我的问题出在 css 文件中，我知道 "display" css 属性非常好，它是如何工作的，但下面的代码实际上是一个下拉菜单代码，{display:none} 意味着什么都不会显示，而 {display:block} 仅用于内联元素。现在我的问题是，当我悬停在 DropDown 按钮上时，显示的哪些隐藏属性会显示 manu,s?

#o2 li a{ background-color: burlywood}

ul li{
    list-style-type: none;
    position: absolute;
}

ul li a{
    text-decoration: none;
    display: block;
}
#o2 li:hover .mainbtn{
    background-color: yellow;
}
#o2 li .dpbtn{
    display: none;
}
#o2 li:hover .dpbtn{
    display: block;
}

<ul id="o2">
    <li><a class="mainbtn" href="#">DropDown</a>
        <div class="dpbtn">
            <a href="#">manu1</a>
            <a href="#">manu1</a>
            <a href="#">manu1</a>
        </div>
    </li>
</ul>

Answer 1

根据您的代码，当我们将鼠标悬停在 li 上时 - .dpbtn 具有属性 display: block;。当您的光标位于任何内部元素上时，例如 a - 您仍在悬停 li，因为 a 在 li 内部，它的一部分。

已更新 .dpbtn 是 div 元素。如果我们不设置任何显示属性 - 默认情况下它将是 BLOCK，而不是 none 默认情况下每个元素都是可见的，如果我们想隐藏它 - 我们应该使用 display none.

使用显示后 none - 我们应该为 :hover 动作重写此行为。

显示块适用于所有元素，如果您在案例文件中提供此属性。默认情况下，有很多元素具有块显示。像 h 和 p，div 和部分......但是如果你让它们显示 none，那么可能在某些时候你需要让它们再次阻塞..所以显示块内联和 on块元素，both @Atul

css 属性 显示 none 和块如何在 html 文件中工作？

How the css property display none, and block works in html file?

html

css

display

css 属性显示 none 和块如何在 html 文件中工作？