하위 메뉴가있는 드롭 다운 메뉴

Question

탐색에 다른 새 하위 메뉴를 삽입하는 데 문제가 있습니다. 여기

// 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 코드입니다 : : 서버에 페이지 here를 찾을 수 있습니다

><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> 

이

여기 내에 javscript 코드입니다.

문제는 새 태그 "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');"> 

이 사람이 잘못 알고 있나요 :

여기에서 잘 작동하는 코드는?

Answer 1

작업 메뉴 항목에 연관된 스타일 시트 규칙이 있습니다 (예 :

#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'>"); 
} 
} 

Answer 2

당신은 거기에 너무 많은 div가있어. 다른 작동 하위 탐색 메뉴 중 하나를 선택하십시오. 링크가있는 단일 div 일뿐입니다. 예를 들어

가 여기에 테이블 메뉴에서 미리보기입니다 :

회의

나는 또한 다른 포스터에 동의; CSS 메뉴를 만드는 방법을 확인하십시오. 특히, http://www.htmldog.com/articles/suckerfish/dropdowns/은 훌륭한 기사이며, IE6 지원이 필요하지 않는 한 Javascript를 사용할 필요가 없습니다.