如何讓父菜單在下拉菜單中的子菜單中保持鼠標懸停狀態

Question

我試圖創建一個下拉菜單。它運作良好。我想要頂部菜單時，停頓truns成白色。當向下移動到子菜單時，頂層菜單應保持白色。但頂層菜單變成了正常的原始顏色。

如何在子菜單中移動鼠標時保留父菜單。

的代碼是在這裏：

HTML

<ul id="jsddm" class="menu_nor_cont"> 
     <li style="margin-left:15px;"><a href="#">Home</a> 
     <li><a href="#">Job Seeker Login</a> 

     </li> 
     <li><a href="#">Post Resume</a> 
     </li> 
     <li><a href="#">Search jobs<span style="margin-left:5px;"><img src="images/down.png" style="width=15px; height=8px;"></span></a> 
      <ul> 
       <li><a href="#">Advanced Search</a></li> 
       <li><a href="#">Jobs by Company</a></li> 
       <li><a href="#" style="border-bottom:none;">Jobs by category</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Employer Login</a></li> 
     <li><a href="#" style="border-right:none;">Post Job</a></li> 
    </ul> 

JS

var timeout = 0; 
var closetimer = 0; 
var ddmenuitem = 0; 

function jsddm_open() 
{ jsddm_canceltimer(); 
    jsddm_close(); 
    ddmenuitem = $(this).find('ul').css('visibility', 'visible');} 

function jsddm_close() 
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function jsddm_timer() 
{ closetimer = window.setTimeout(jsddm_close, timeout);} 

function jsddm_canceltimer() 
{ if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null;}} 

$(document).ready(function() 
{ $('#jsddm > li').bind('mouseover', jsddm_open) 
    $('#jsddm > li').bind('mouseout', jsddm_timer)}); 

document.onclick = jsddm_close; 

CSS

#jsddm 
{ margin: 0; 
    padding: 0; 


} 

    #jsddm li 
    { 
     float: left; 
     list-style: none; 

    } 

    #jsddm li a 
    { display: block; 
     padding: 5px 12px; 
     padding-left:15px; 
     padding-right:15px; 
     text-decoration: none; 
     border-right: 1px solid #DBDBDB; 
     padding-bottom:6px; 
     color: #EAFFED; 
     white-space: nowrap} 

    #jsddm li a:hover 
    { 
     background-color:#FFF; 
     color:#000; 

    } 

     #jsddm li ul 
     { margin: 0; 
      padding: 0; 
      position: absolute; 
      visibility: hidden; 
      border:#3895C0 1px solid; 
      border-top:none; 

      z-index:1001; 
      margin-left:-2px; 
     } 

     #jsddm li ul li 
     { float: none; 
      display: inline; 
      margin:0px; 


     } 

     #jsddm li ul li a 
     { width: auto; 
      background: #fff; 
      color:#080CB2; 
      font-weight:normal; 
      font-size:11px; 
      border-bottom:1px solid #CCC; 
      text-decoration:none; 
      width:180px; 
     } 

     #jsddm li ul li a:hover 
     { 

      text-decoration:underline; 
      color:#080CB2; 
     } 

Answer 1

這個問題是由於CSS中的「懸停」狀態造成的，所以當你離開「a」元素時，你會失去懸停狀態。

對你的代碼的一些修改應該使這個工作。

  function jsddm_open() { 
       jsddm_canceltimer(); 
       jsddm_close(); 
       ddmenuitem = $(this).find('ul').css('visibility', 'visible'); 
       $(">a", $(this)).css("background-color", "#FFF"); 
      } 

      function jsddm_close() { 
       if (ddmenuitem) { 
        ddmenuitem.css('visibility', 'hidden'); 
        $(ddmenuitem).prev().css("background-color", ""); 
       } 
      } 

注意：你也缺少在發佈

Answer 2

我不明白你爲什麼需要在這裏使用JS。我看到很多人試圖製作簡單的下拉菜單，但沒有花時間使用正確的HTML結構並使用CSS來操作元素。

除非你真的想要某種動畫（又可以使用CSS3轉換做動畫），那麼我會建議使用這個答案，我給了另一個用戶誰有一個下拉問題一會兒回來。

CSS drop-down menus pushing page content down

上面的鏈接給你一個HTML + CSS下拉解決的一個非常快的，直截了當的例子。通過使用這個示例，您可以通過僅使用HTML和CSS保持父鏈接「選中」來實現您的目標。

---

編輯：

說話，直接到你的問題。你所需要做的就是解決你的問題，就是設置你的CSS有點不同。

變化：

#jsddm li a:hover { 
    background-color:#FFF; 
    color:#000; 
} 

要：

#jsddm li:hover a { 
    background-color:#FFF; 
    color:#000; 
} 

正如你所看到的，我選擇li元素，而不是使用一個標籤的:hover僞選擇。這是因爲您將子菜單ul包裝在此標籤中。所以在技術上它是父元素。