css - CSS菜单悬停显示一个框

Question

所以我想做一个css导航栏，一旦用户将鼠标悬停在它上面，它就会显示一个带有contect的框。

悬停前。

悬停后。

这可能我一直在尝试但失败了。谢谢。

Answer 1

当然，你可以试试这样。假设导航菜单有一个标签：

div {
    display: none;
}
a:hover ~ div:nth-child(n) {
    display: block;
    background-color: RED;
    height: 250px;
    width: 960px;
}

将 n 替换为 yor div 的顺序。例如，如果你在 a 标签旁边放了一个 div，那么 n 的值就是 2。

更新：

您也可以尝试使用 div 的类名或 id：

a:hover ~ .classname {
    display: block;
    background-color: RED;
    height: 250px;
    width: 960px;
}

Answer 2

看看这个演示。

是的，这可以通过将悬停框放在 li 元素中，然后给父元素位置相对和子元素一个绝对位置来实现。

HTML

<ul>
    <li>Home</li>
    <li class="box">Categories
        <div class="arrow_box">Box with Content</div>
    </li>
</ul>

CSS

ul {
    margin: 0;
    list-style: none;
}
ul li {
    display: inline-block;
    padding: 25px 10px;
}
ul li.box {
    position: relative;
}
.arrow_box { background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #88b7d5; border-width: 30px; left: 50%; margin-left: -30px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 36px; left: 50%; margin-left: -36px; }
.arrow_box {
    position: absolute;
    top: 68px;
    padding: 10px 10px;
    display: none;
    width: 150px;
    left: -50px;
}
ul li.box:hover .arrow_box {
    display: block;

}

使用它来创建 css 箭头 --> http://cssarrowplease.com/