下拉菜單 - 項目依賴

Here是我的菜單的完整代碼。爲了清晰起見，我不再在這裏發佈。下拉菜單 - 項目依賴

某些代碼的解釋：

id="onlink"意味着鏈接被點擊。該頁面處於活動狀態。

我要的是當MENU是onlink，它的整個子菜單（在這裏都：submenu和submenu2）應該成爲可見的太（注意，我們還沒有任何點擊子菜單特別）。

是否有可能在純css中建立這樣的依賴關係？

到目前爲止，子菜單僅在菜單懸停時彈出並在其後消失。

來源

2013-08-31 nutship

PS - 請注意，在未來，如果你有多個下拉菜單，你將必須定義'Z-index'es等來了' .SUB-menu's。 – Itay

只是擴大你的選擇使用General sibling selector (~)每.sub-menu這是包括#onlink後。

#menu li:hover .sub-menu, 
#menu #onlink ~ .sub-menu { 
    display:block; 
    width: 150px; 
    text-align: center; 
}

jsFiddle Demo

來源

2013-08-31 11:40:37 Itay

還有更好的解決辦法:) – Lukas1

你可以把菜單和它的子菜單共享相同的類，然後使用

.class:hover { 
    // Your CSS code 
}

來源

2013-08-31 11:39:19 Lukas1

我認爲你正在尋找讓子菜單進行徘徊，以及即使在MENU不ONLINK。這是一個解決方案。希望這是你正在尋找的。我使用了opacity css屬性。

#menu li ul.sub-menu { 
    opacity: 0; 
    position:absolute; 
} 

    #menu li ul.sub-menu a { 
     border: none; 
     background: none; 
     display: block; 
    } 

    #menu li:hover .sub-menu { 
     opacity:1; 
     width: 150px; 
     text-align: center; 
    }

這裏是一個小提琴http://jsfiddle.net/Y8pnm/2/

來源

2013-08-31 11:51:57

你以爲我實際上已經想到了。這是我將盡快實施的功能，非常感謝您的解決方案。我接受Itay的答案，但爲了解決我最初的問題。 – nutship

您的歡迎@版權:) –

下拉菜單 - 項目依賴

回答

相關問題