Html/Css Issue anchor tag

Question

이것은 내 사이트입니다 http://igbowomenassembly.org/, 우리 이그제큐티브 -> National Executive를 클릭하면 테마가 사용됩니다. 하위 메뉴가 나타나지만 모든 항목을 클릭 할 수는 없습니다. 부회장에게 클릭하면 Engugu Executive 메뉴가 자동으로 표시됩니다.

내 문제를 해결하고 도움을 주셔서 감사합니다.

죄송합니다. html/css와는 다른 모든 가족이 아닙니다. 문제는 모든 브라우저에서 발생합니다.

/* 주 메뉴 /////////////////////////////// */

.menu-bar { 
    background:#222222; 
    } 
.menu-bar .menu { 
    display:inline-block; 
} 
.menu { 
    list-style:none; 
} 
.menu li { 
    position:relative; 
} 
.menu > li { 
    display:inline-block; 
} 
.menu > li > a { 
    padding:15px 22px; 
    font-size:15px; 
    color:#fff; 
    text-transform:uppercase; 
    display:inline-block; 
} 
.menu li:hover > a { 
    background:#000; 
} 

.menu-bar li ul { 
    width:172px; 
    height:0px; 
    padding:0; 
    background:#000; 
    z-index:201; 
    overflow:hidden; 
    display:block; 
    opacity:0; 
    filter:alpha(opacity=0); 
    position:absolute; 
    left:0px; 
    top:50px; 

    border-radius:0px 3px 3px 3px; 
    -moz-border-radius:0px 3px 3px 3px; 
    -webkit-border-radius:0px 3px 3px 3px; 

    transition:all 0.4s ease; 
    -moz-transition:all 0.4s ease; 
    -webkit-transition:all 0.4s ease; 
} 
.menu li li a { 
    padding:10px 12px; 
    font-size:14px; 
    color:#fff; 

    border-radius:3px; 
    -moz-border-radius:3px; 
    -webkit-border-radius:3px; 
} 

.menu-bar li li { 
    display:none 
} 
.menu-bar li:hover li { 
    display:block 
} 
.menu-bar li li a { 
    display:block; 
} 
.menu-bar li li:hover > a { 
    background:#222; 
} 
.menu-bar li:hover > ul { 
    overflow:visible; 
    padding:8px; 
} 
.menu-bar li:hover > ul { 
    height:auto; 
    opacity:1; 
    filter:alpha(opacity=100); 
} 
.menu-bar li > ul ul { 
    height:auto; 
    margin-left:8px; 
    margin-top:-8px; 
    left:100%; 
    top:0px; 
} 
.menu-bar li li:hover > ul { 
    opacity:1; 
    top:0px; 
} 

Answer 1

이것은 간단한 z-index 문제입니다. 라인에서 :

.menu-bar li ul 

모든 하위 메뉴, 시간에 숨겨진 여부는, 우선됩니다 것입니다 소스를 내려 낮은 제공 한 후 하나를 동일한 z-index이있는 경우 (201)의 z-index이 모든 하위 메뉴를 말하고있다 그것 위에있는 것. 이것은 아래쪽 메뉴가 갑자기 튀어 나오는 이유입니다.

높은 우선 순위를 갖도록 마우스 커서가있는 하위 메뉴 만 업데이트하면 소스 순서의 아래쪽에있는 하위 메뉴보다 우선 적용됩니다. 따라서 다음 코드를 업데이트하십시오 :

.menu-bar li li:hover > ul { 
    opacity:1; 
    top:0px; 
    z-index: 202; /* this is a new line */ 
} 

문제를 해결할 것입니다. 우리를 도울 수 http://jsfiddle.net/2WcBW/