网站菜单栏下拉菜单
我正在为客户建立一个网站。 对于菜单/导航栏，我为他们创建了一个（他们非常具体）下拉列表，但有一个问题 – 当你将鼠标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插件 。 它专为这种用途而设计，有助于提供更强大的下拉菜单。