下拉菜单与子菜单

我有一个问题，插入另一个新的子菜单到我的导航。下拉菜单与子菜单

这里是我的Javscript代码：

// Main Nav Javascript Function ***************************************** 
var navTimer = ""; 
bop = new Object(); 
bop.targetDiv = ""; 
bop.hide = function(){ 
document.getElementById(bop.targetDiv).style.visibility = "hidden"; 
} 

function openNav(myDiv){ 
if(bop.targetDiv != "") bop.hide(); 
    bop.targetDiv = myDiv; 
    clearTimeout(navTimer); 
    document.getElementById(myDiv).style.visibility = "visible"; 
    document.getElementById(myDiv).onmouseout = function(){ 
     navTimer = setTimeout("bop.hide()", 100); 
    } 
    document.getElementById(myDiv).onmouseover = function(){ 
     clearTimeout(navTimer); 
    } 
} 

function hideNav(myDiv){ 
    bop.targetDiv = myDiv; 
    navTimer = setTimeout("bop.hide()", 150); 
} 

<!-- Display Sub Nav/Clear Sub Nav --> 
function SubNav(myVar){ 
document.getElementById(myVar).style.visibility = "visible"; 
} 

function clearNav(myVar){ 
document.getElementById(myVar).style.visibility = "hidden"; 
} 

function shortPopUp(url, name, width, height, scrollbars) { 
    var top = "0"; 
    var left = "0"; 

    if(scrollbars == null) scrollbars = "0"; 

    str = ""; 
    str += "resizable=1,titlebar=1,menubar=1,"; 
    str += "toolbar=0,location=0,directories=0,status=0,"; 
    str += "scrollbars=1" + scrollbars + ","; 
    str += "width=" + width + ","; 
    str += "height=" + height + ","; 
    str += "top=" + top + ","; 
    str += "left=" + left; 

    window.open(url, name, str); 
}

这是我的HTML代码：

><div class="navItem" onMouseOver="SubNav('seat-twenty');" onMouseOut="clearNav('seat-twenty');"><a href="fps_twenty2.html" target="frame">Twenty2</a><div id='seat-twenty' class="dropDown" onMouseOver="SubNav('seat-twenty');" onMouseOut="clearNav('seat-twenty');"> 
<div class="navItem"><a href="fps_twenty2.html" target="frame">Twenty2 Overview</a></div> 
<div class="navItem"><a href="fb_twenty2_black.html" target="frame">Twenty2</a></div> 
<div class="navItem"><a href="fb_twenty2_red.html" target="frame">Twenty2-US</a></div> 
<div class="navItem"><a href="fb_twenty2_red_black.html" target="frame">Twenty2-UP</a></div> 
</div></div>

在服务器上的页面，可以发现here。

的问题是导航，当我试图插入新的标签“Twenty2”的座位选项卡下，而不是开一个额外的子菜单，子菜单仍停留在同一个下拉菜单....我检查一遍又一遍的代码，我的错误代码和正确的代码之间没有什么不同。

这里有一个正常工作的代码：

> <div class="navItem" onMouseOver="SubNav('seat-heavy');" 
> onMouseOut="clearNav('seat-heavy');"><a href="fps_heavy_duty.html" 
> target="frame">Heavy Duty</a><div id='seat-heavy' class="dropDown" 
> onMouseOver="SubNav('seat-heavy');" 
> onMouseOut="clearNav('seat-heavy');">

有谁知道什么是错？

来源

2012-07-12 m_frog

您的工作菜单项与它们有相关的样式表规则，例如，

#seat-healthcare { 
    background-color: #E7E7E7; 
    position: absolute; 
    margin-top: -18px; 
    margin-left: 130px; 
    z-index: 199; 
    width: 119px; 
    padding-top: 3px; 
    padding-bottom: 4px; 
}

，但你没有一个#seat-twenty，所以当它弹出它会立即消失，因为它认为你滚出，因为它不具备保证金左集。

总而言之，所有的菜单都以愚蠢的方式工作，我真的建议有更通用的东西，所以你不必为每个项目都有样式表条目。

是插入你的样式表的样式表相关JS

// Browser & Platform Detection & Style Sheet Documentation ******************* 
if(navigator.userAgent.indexOf("Safari")!=-1){ 
    document.write("<link href='styles/MacSafari_style.css' rel='stylesheet' type='text/css'>"); 

} 
if(navigator.userAgent.indexOf("Firefox")!=-1){ 
    if(navigator.appVersion.indexOf("Mac")!=-1){ 
    // Added Fix for High Rez Screens 
    if((screen.width >= 1400) && (screen.height >= 1050)){ 
     document.write("<link href='styles/HighRez_MacMozilla_style.css' rel='stylesheet' type='text/css'>"); 
    } else { 
     document.write("<link href='styles/MacMozilla_style.css' rel='stylesheet' type='text/css'>"); 
    } 
} else { 
    document.write("<link href='styles/Mozilla_style.css' rel='stylesheet' type='text/css'>"); 
    } 
} 
if(navigator.appName == "Microsoft Internet Explorer"){ 
    if(navigator.appVersion.indexOf("Mac")!=-1){ 
     document.write("<link href='styles/MacIE_style.css' rel='stylesheet' type='text/css'>"); 
    } else { 
    document.write("<link href='styles/IE_style.css' rel='stylesheet' type='text/css'>"); 
} 
}

来源

2012-07-12 20:28:02 Snuffleupagus

我没有看到从我的文件附加任何css文件，你在哪里找到它？ – 2012-07-12 20:39:51

@ user973392在我的开发人员工具下。有一段JS运行，选择要使用的样式表，回答编辑。 – Snuffleupagus 2012-07-12 21:16:06

你在那里有太多的div。检查其他工作子导航菜单之一。这只是一个单独的div与链接。

例如，这里是一个从表菜单中的一个片段：

会议

我也同意与其他海报;看看如何制作CSS菜单。特别是，http://www.htmldog.com/articles/suckerfish/dropdowns/是一篇很棒的文章，只要你不需要IE6的支持，你就不需要使用Javascript。

来源

2012-07-12 20:43:00 omniuni

下拉菜单与子菜单

回答

相关问题