挂起的div显示在悬停菜单上

Question

我创建了一个JSFiddle，请查看。

fiddle

我在嵌套div的悬停功能上定位css时遇到问题。在代码示例中，我如何将以下目标定位到特定div

div id=”nav1″ display div id=”section5″

div id=”nav2″ display div id=”section6″ 

目前，parent div id=”nav” displays div id=”section5″

如果有更好的方法，请告诉我。

谢谢

Answer 1

您需要稍微更改HTML结构，移除父.nav以生成#nav1，#nav2，#section5和#section6“兄弟姐妹”。然后使用兄弟CSS选择器来定位你想要的东西：

<强> CSS：

#nav1:hover ~ #section5,
    #section5:hover  {
    display:  block;
}

#nav2:hover ~ #section6,
    #section6:hover  {
    display:  block;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/9965yanr/6/

修改

添加float和.nav所拥有的其他属性，以及一些可以改进的调整。查看工作演示：https://jsfiddle.net/lmgonzalves/9965yanr/8/