隱藏/顯示基於懸停的鏈接隱藏/顯示的CSS選擇器

我在確定選擇器或選擇器層次結構時遇到了一些問題，我應該使用CSS來顯示「子菜單」。隱藏/顯示基於懸停的鏈接隱藏/顯示的CSS選擇器

我想要根據a:link在內完全分開的<nav>中的懸停來顯示子菜單。

我只是不知道如何寫CSS，以得到其效果

HTML

<div class="row"> 
    <nav id="nav" class="nav-holder"> 
     <ul id="nav" class="menu"> 
      <li><a href="#">Links!</a></li> 
      <li><a href="#">Links!</a></li> 
      <li><a href="#">Links!</a></li> 
      <li><a href="#">Links!</a></li> 
      <li><a href="#">Links!</a></li> 
      <li><a href="#">Links!</a></li> 
     </ul> 
    </nav> 
    </div> 
    <div class="cleared"></div> 

    <div class="row"> 
     <div class="submenunav"></div> 
    </div>

錯誤的CSS

.submenunav { display:none;} 

#nav ul#nav li a:hover .submenunav { 
    position:absolute; 
    z-index:500; 
    display:block; 
    margin:0px; 
    padding:0px; 
    width:940px; 
    height:200px; 
    background:#E9EAEE; 
    border-bottom:9px #67B7E1 solid; 
    box-shadow:0 8px 6px -6px black; 
}

我的小提琴 - http://jsfiddle.net/NVwks/

希望的效果是子菜單塊基於hov出現雖然最終我會給a:links唯一的子類別的獨特的類。

非常感謝。

來源

2012-10-18 RCNeil

看起來，這是不可能單獨使用CSS。 '.submenunav'元素不是鏈接的子節點或兄弟節點，您不能使用CSS選擇器「返回」。 –

在'

Links!

'你可以在CSS中使用'li> a：hover .submenunav {display：block; }'。但在你的例子中，我認爲你不能。 – SYNCRo

這裏的問題是您的a:link元素包含在您的nav元素中，您所說的元素與您要顯示的子菜單元素完全分離。您的結構中的這種分離使得僅憑:hover和其他CSS選擇器無法實現。

重構標記似乎沒有太多空間，因此您可能必須使用腳本來實現所需的功能。

來源