Css菜单悬停显示一个框

Question

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

悬停之前。

悬停后。

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

Answer 1

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

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

用yor div的顺序替换n。例如，如果在a标记旁边放置一个div，那么n的值将为2.

更新：

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

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

Answer 2

<强> Check out this Demo.

是的，这可以通过将悬停框放入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箭头 - ＆gt; http://cssarrowplease.com/