使用子組合器在懸停時顯示子元素

我試圖設計一個導航菜單。我有這樣的HTML代碼：使用子組合器在懸停時顯示子元素

<div class="primaryNavigationContainer"><ul id="menu-menu-1" class="menu"><li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-5"><a href="http://merrycode.com/cheekoo/wp/">Home</a> 
<ul class="sub-menu"> 
    <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://www.xyz.com">MerryCode</a></li> 
    <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="http://www.google.com">Google</a></li> 
</ul> 
</li> 
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="http://merrycode.com/cheekoo/wp/?page_id=2">Sample Page</a></li> 
</ul></div>

這是CSS：

.menu a 
{ 
    font: normal 14px Helvetica, sans-serif; 
    padding-left:5px; 
    padding-top:5px; 
    padding-right:5px; 
    float:left; 
    color:black; 

} 
.menu-item a{ 

text-decoration:none; 

} 

.menu li a:hover > ul { 

    display:block !important; 
} 

.sub-menu 
{ 
display: none; 
position: absolute; 
top:120px; 
width: 170px; 
height:auto; 
background: #edebeb; 
z-index: 100000; 
z-index: 99999; 
-moz-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06); 
-webkit-box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06); 
box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.06); 
list-style-type: none; 

} 
.sub-menu a 
{ 
float: none; 
}

我試圖讓子菜單可見，當有人懸停在菜單項。並且下面的CSS似乎不起作用：

.menu li a:hover > ul { 

     display:block !important; 
    }

我在做什麼錯？

來源

2014-01-17 Umair Khan Jadoon

你可以撥動它來讓我們編輯。 – saopayne

這裏你去：http://jsfiddle.net/NjpNN/ –

使用adjacent sibling combinator代替：

.menu li a:hover + ul { 
    display: block !important; /* The UL is a sibling of a, not child */ 
}

來源

2014-01-17 20:39:13 Adrift

非常感謝。你能再告訴我一件事嗎？我如何才能使菜單保持在屏幕上，直到用戶取消懸停子菜單或菜單項爲止。目前，當我們取消懸停菜單項時，它會消失（抱歉打擾）。 –

你可能想在<li>代替<a>標籤使用:hover，試試這個：

.menu li:hover > ul { 
    display:block !important; 
}

隨着這是持久的，當你將鼠標懸停在子菜單太。

來源

2014-01-17 20:41:06 DaniP

使用子組合器在懸停時顯示子元素

回答

相關問題