下拉菜单（含图像和UL李列表）

我有一个下拉菜单（我固定的位置）和display: none;比我只是改变显示屏。我有这样的：下拉菜单（含图像和UL李列表）

的JavaScript

$('.dropdownmenu').hover(function() { 
     console.log("hovered"); 
    }, 
    function() { 
     console.log("out"); 
    } 
);

HTML

<div class="dropdownmenu" style="display: none;"> 
    <div id="dropdownmenuheader"> 
     <ul class="dropdownmenulist"> 
      <li> 
       <div class="dbordermenulist"><a href="/blah">Web design & development</a> 
       </div> 
      </li> 
      <li> 
       <div class="dbordermenulist"><a href="/blah">Web hosting</a> 
       </div> 
      </li> 
      <li> 
       <div class="dbordermenulist"><a href="/blah">Branding</a> 
       </div> 
      </li> 
      <li> 
       <div class="dbordermenulist"><a href="/blah">Digital Marketing</a> 
       </div> 
      </li> 
      <li style="border-bottom: 0;"> 
       <div class="dbordermenulist" style="border-bottom: 0;"><a href="/blah">Software Development</a> 
       </div> 
      </li> 
     </ul> 
    </div> 
    <div id="dropdowngradient"></div> 
</div>

不过了mouseenter，鼠标离开或悬停似乎不工作，我试图创建效果当有人徘徊在它上面时，它仍然可见，但当鼠标离开2秒时，它会消失。（我知道我需要使用计时器，但我无法触发.hover）。

来源

2014-03-28 belthazorNv

的元件完全隐藏（显示：无），鼠标事件不会触发，除非它是可见的。 –

我在菜单按钮上的鼠标改变它，并变得可见..但没有任何东西从那里触发..锂悬停工作正常（下拉菜单列表），但悬停不会触发 – belthazorNv

因为这可能不会为您的初始问题提供答案，所以我问我自己，为什么不使用CSS来处理此用例？

这里是一个例子：http://jsfiddle.net/NicoO/R9NNx/1/

更新例如用CSS转换和上悬停延迟：http://jsfiddle.net/NicoO/R9NNx/10/

ul.dropdownmenulist { 
    list-style: none; 
    margin:0; 
    padding:0; 
} 
ul.dropdownmenulist > li { 
    float: left; 
    margin: 5px; 
    position: relative; 
} 
ul.dropdownmenulist > li > ul { 
    display: none; 
    position: absolute; 
    background-color: lightgray; 
    box-shadow: rgba(0,0,0,0.3) 2px 2px 2px; 
} 

ul.dropdownmenulist > li:hover > ul { 
    display: block; 
}

利用这种HTML：

<ul class="dropdownmenulist"> 
    <li><a href="#">What we do</a> 

     <ul> 
      <li> <a href="/blah">Web design & development</a> 

      </li> 
      <li> <a href="/blah">Web hosting</a> 

      </li> 
      <li> <a href="/blah">Branding</a> 

      </li> 
      <li> <a href="/blah">Digital Marketing</a> 

      </li> 
      <li> 
<a href="/blah">Software Development</a> 

      </li> 
     </ul> 
    </li> 

    <li><a href="#">What we do</a> 

     <ul> 
      <li> <a href="/blah">Web design & development</a> 

      </li> 
      <li> <a href="/blah">Web hosting</a> 

      </li> 
      <li> <a href="/blah">Branding</a> 

      </li> 
      <li> <a href="/blah">Digital Marketing</a> 

      </li> 
      <li> 
<a href="/blah">Software Development</a> 

      </li> 
     </ul> 
    </li> 
</ul>

来源

2014-03-28 12:20:20

因为我鼠标离开后需要延时（定时器）和fadeTo（2000,0）; – belthazorNv

我希望你会说这样的话;）在这里你去：http://jsfiddle.net/NicoO/R9NNx/10/ –

下拉菜单（含图像和UL李列表）

回答

相关问题