콘텐츠 영역 위로 마우스를 이동하면 드롭 다운 메뉴가 나타납니다.

Question

어떤 이유로 든 기본 탐색 탭 아래 영역 위로 마우스를 가져 가면 드롭 다운 메뉴가 나타납니다. 나는 이것을 알아 내려고 노력해 왔으며 처음부터 쓰는 것을 피하려고 노력하고있다.

어떤 도움이 필요합니까?

#primary_nav_wrapper {  
    position: relative; 
    top: 85px;  
    width: 100%;   
    height: 39px; 
    border-top: 1px solid rgb(90,90,90); 
} 

#primary_nav { 

    position: absolute; 
    margin: 0 2.5%; 
    width: 95%; 
    height: 100%; 
} 

/* Affects parent tabs only ============================================================================*/ 

#primary_nav > ul#all_parent_tabs { 
    position: relative; 
    margin: 0; 
    /*^Resets margin for the parent tabs in th primary nav. Removing affects position*/ 
    padding: 0; 
    /*^Resets padding for the parent tabs in th primary nav. Removing affects position*/ 
    height: 100%; 
    /*Sets ul*/ 
    list-style-type: none; 
    text-align: center; 
    font-size: 14px; 
} 


#primary_nav > ul#all_parent_tabs > li { 
    position: relative; 
    float: left; 
    list-style-type: none; 
    width: 12.5%; 
    height: 100%; 
    display: block; 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
} 

#primary_nav > ul#all_parent_tabs > li > a { 
    display: block; 
    text-decoration: none; 
    color: rgb(133,133,133); 
} 

#primary_nav > ul#all_parent_tabs > li.parent_tabs_one_line > a{ 
    line-height: 39px; 
} 

#primary_nav > ul#all_parent_tabs > li.parent_tabs_two_line > a{ 
    padding: 4px 0 0 0; 
} 

#primary_nav > ul#all_parent_tabs > li:hover { 
    background-color: rgb(248,248,248); 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -ms-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
} 


#primary_nav > ul#all_parent_tabs > li:hover > ul.drop_down_menu li a{ 
    visibility: visible; 
    opacity: 1; 
    -webkit-transition: .4s all .4s; 
    -moz-transition: .4s all .4s; 
    -ms-transition: .4s all .4s; 
    -o-transition: .4s all .4s; 
    transition: .4s all .4s; 
} 

#primary_nav > ul#all_parent_tabs > li#active_tab { 
    border-bottom: 3px solid rgb(65,217,28); 
    background-color: rgb(248,248,248); 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    -o-box-sizing:border-box; 
} 

/* For drop-down menu ==================================================================================*/ 


#primary_nav > ul#all_parent_tabs > li > ul.drop_down_menu { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    height: 262px; 
    width: 140%; 
    top: 39px; 
    text-align: left; 
} 

#primary_nav > ul#all_parent_tabs > li > ul.drop_down_menu > li { 
    margin: 0; 
    padding: 0; 
    width: 140%; 
    height: 26px; 
    line-height: 26px; 
    font-size: 13px; 
    display: block; 
} 

#primary_nav ul#all_parent_tabs > li > ul.drop_down_menu > li > a{ 
    position: absolute; 
    margin: 0; 
    padding: 0 5px; 
    display: block; 
    width: 140%; 
    background-color: rgb(240,240,240); 
    border: 1px solid rgb(205,205,205); 
    text-decoration: none; 
    color: rgb(150,150,150); 
    z-index: 1; 
    visibility: hidden; 
    opacity: 0; 
} 

#primary_nav ul#all_parent_tabs > li:hover > ul.drop_down_menu > li > a:hover { 
    background-color: rgb(233,254,237); 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -ms-transition: all .2s; 
    -o-transition: all .2s; 
    transition: all .2s; 

Answer 1

문제는 ul.drop_down_menu이 숨겨져로 설정되지 않은 사실과 관련이 아니라 그 자식 요소 (A 태그) :

여기에 내가 가지고있는 CSS 코드입니다. 따라서 ul.drop_down_menu 위로 마우스를 올리면 여전히 부모 li 태그의 호버 상태가 트리거됩니다 (전환이 트리거되는 이유).

ul.drop_down_menu { 
    visibility:hidden; 
} 
li:hover ul.drop_down_menu { 
    visibility:visible; 
} 

JSFiddle