网站菜单栏下拉菜单

我正在为客户建立一个网站。 对于菜单/导航栏,我为他们创建了一个(他们非常具体)下拉列表,但有一个问题 – 当你将鼠标hover在下拉列表中的一个项目上时,它会消失 – 请在此处查看http: //www.brandonsdesigngroup.com/menu-expamle.html 。

对于代码,我从谷歌API调用jquery,然后是javascript,CSS和实际内容(在无序列表中)。

使用Javascript:

 $(document).ready(function(){ $("#nav-one li").hover( function(){ $("ul", this).fadeIn("fast"); }, function() { } ); if (document.all) { $("#nav-one li").hoverClass ("sfHover"); } }); $.fn.hoverClass = function(c) { return this.each(function(){ $(this).hover( function() { $(this).addClass(c); }, function() { $(this).removeClass(c); } ); }); };  

CSS:

  .nav, .nav ul { list-style: none; margin: 0; padding: 0; height:20px } .nav { z-index: 100; position: relative; } .nav li { border-left: 0px solid #000; float: left; margin: 0; padding: 0; position: relative; font-family: Arial, Helvetica, sans-serif; font-style:normal; font-size:12px; } .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { font:1.22em/25px "Arial Narrow", Arial, sans-serif letter-spacing:5px; color: #FFFFFF; display: block; padding: 0 10px; text-decoration: none; text-style: narrow; margin-right:26px; } .nav li a:hover { margin-right:26px; color: #FFFFFF; } #nav-one li:hover a, #nav-one li.sfHover a { color: #FFFFFF; } #nav-one li:hover ul a, #nav-one li.sfHover ul a { color: #FFFFFF; height:20px; background-image: url(menubar/transparent.png); } #nav-one li:hover ul a:hover, #nav-one li.sfHover ul a:hover { color:#FFFFFF; background-image:url(menubar/transparent.png); } .nav ul { border-bottom: 0px solid #FFFFFF; list-style: none; margin: 0; width: 100px; position: absolute; top: -99999px; left: 0px; } .nav li:hover ul, .nav li.sfHover ul { top: 22px; } .nav ul li { border: 0; float: none; font-family: Arial, Helvetica, sans-serif; font-style:normal; font-size:10px; } .nav ul a { border: 0px solid #000; border-bottom: 0; padding-right: 50px; margin-bottom: 0px; width: 130px; white-space: nowrap; } .nav ul a:hover { color: #FFFFFF; }   body { width: auto; height: auto; background-color: #3A2C21; }  

HTML:

   

问题#1:菜单在光标到达子菜单之前消失。

通常这是由于

  • 标签与子导航

      之间存在差距。 即使是一个像素的间隙也会导致导航在光标到达子菜单之前消失。

      例如,添加padding: 0 0 10px; 你的CSS中的.nav li ,问题就消失了。

      您也可以为

    • 设置特定高度以解决问题。

      问题#2:当光标在图像幻灯片上运行时,菜单消失。

      当您到达图像幻灯片和菜单碰撞的点时,菜单消失的问题,这是由于z-index问题。

      您应该将.nav设置为具有z-index: 200 (或根据您的幻灯片显示大于100的任何内容 – 我尝试过火)。 这将确保它位于画廊上方。

      使用Javascript

         

      html已经是会员?

        登录

      成为会员? 注册

      • 军队
      • 海军
      • 空军

      我会使用Hover Intent插件 。 它专为这种用途而设计,有助于提供更强大的下拉菜单。