懸停菜單上的嵌套div顯示

Question

我創建了一個JSFiddle，請查看。

fiddle

我有麻煩瞄準懸停功能的CSS div嵌套。在代碼示例中，我怎麼可以有以下目標特定的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和anothers性質.nav有，你可以改善一些調整。看到工作演示：https://jsfiddle.net/lmgonzalves/9965yanr/8/