CSS子菜單懸停問題

我有一個子菜單，當我將鼠標懸停在父列表它就向下像它應該和一切工作與懸停顏色，但是當我回去到父列表它不顯示懸停顏色，直到我在頂部/幾乎在列表中..這是一個填充問題？CSS子菜單懸停問題

/* MENU */ 


#gen_navigation { 

float:right; 
margin:0; 
padding:0; 


} 

#gen_navigation li a, #gen_navigation li { 
float:left; 
} 

#gen_navigation li { 

list-style:none; 
position:relative; 

} 

#gen_navigation li a { 
padding: 35px 20px 23px 20px; 
text-decoration:none; 
color:white; 
border-right: 1px solid #3c3c3c; 
border-left: 1px solid #333; 
border-bottom: 1px solid #232323; 
border-radius:3px; 
} 

/* Sub-Menu */ 
#gen_navigation li ul { 
display:none; 
position:absolute; 
left:0; 
top:100%; 
margin:0; 
padding:0; 
background: #292929; 
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px); 
    background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929)); 

} 

    #gen_navigation li:hover ul { 
display:block; 

} 
#gen_navigation li ul li, #gen_navigation li ul li a { 
float:none; 
} 


#gen_navigation li ul li a { 
width: 180px; 
display: block; 
}

和HTML

<ul id="gen_navigation"> 
      <li class="selected"><a href="#"><span>Home</span></a></li> 
      <li><a href="#"><span>About</span></a> 
       <ul> 
        <li><a href="#">Gate 5 Energy Partners</a></li> 
        <li><a href="#">Leadership</a></li> 
        <li><a href="#">Key Consultants & Strategic Partners</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><span>Technology</span></a> 
       <ul> 
        <li><a href="#">About SERT</a></li> 
        <li><a href="#">About the inventor</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><span>Applications</span></a> 
       <ul> 
        <li><a href="#">Agri-Business</a></li> 
        <li><a href="#">WasteWater Industry</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><span>Benefits</span></a> 
       <ul> 
        <li><a href="#">Environmental Benefits</a></li> 
        <li><a href="#">Economic Benefits</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><span>Inquiries</span></a></li> 
     </ul>

來源

2012-12-14 Blake

這是http://jsfiddle.net/YjLxy/ – Blake

嗯，我試圖讓你的代碼工作的一個不同的問題，我得到了它，但現在我看到joholo整理出來。不過，我認爲我有你的解決方法：通過使用jQuery的parents()，我重新將'selected'類添加到頂部<li>。

Check this working example

順便說一句：我覺得你.animate不工作，所以我想你試圖使用jQuery-UI的effect。檢查出來。

問候！

來源

2012-12-14 23:21:31

是啊給我帶來了一些問題。當我將鼠標懸停在第一個子菜單項上時，盤旋消失 – Blake

對不起，我不瞭解你......你能改說嗎？ –

對不起。當你將鼠標懸停在子菜單上，然後回到父列表中時，是否有一種方法，當你將鼠標懸停在父列表項上時，該UL的頂級子項將移除懸停類。我希望那不是更混亂，仍然學習行話 – Blake

可能不是填充的問題，在我看來更像是一個JavaScript事件處理程序的問題。

父仍然徘徊在JavaScript即使你盤旋在它的孩子之一。因此，當您返回父級時，懸停不會爲父級啓動。

$('li').hover(function(){ 
    // 1. Parent gets onmouseover (hover) first time. Adds .selected on it's element. 
    // 2. When mouse move from parent to child, removes .selected from parent, and adds to child. 
    // 3. When back from child to parent, onmouseover (hover) on parent won't fire because it already (technically one of its children) already has onmouseover. 
    $('li').removeClass('selected'); 
    $(this).addClass('selected').animate(bounce);   
});

如何解決此問題的最好方法是在:-)

來源

2012-12-14 23:12:04 joholo

啊是的!!!!!!!!!!!!!!!謝謝我終於可以離開可怕的圖書館..很欣賞 – Blake

CSS子菜單懸停問題

回答

相關問題