CSS 배경이 보이지 않음 (넘침 : 자동으로 도움이되지 않음)

Question

# navigation_conatiner_7의 배경과 테두리는 표시되지 않습니다. 오버플로 : auto를 부모에 추가하려고 시도했지만 스크롤 막대 만 표시합니다. 나중에 같은 것을 추가하려고 시도했지만 완전히 숨겨졌습니다. 나는 아이디어가 없어지기 때문에 여기 누군가가 대답을 줄지도 모른다고 생각했습니다. http://jsfiddle.net/Tamaki/my5GV/

HTML :

<div id="navigation"> 
    <div id="holder"> 
     <div id="navigation_category_2">articles</div> 
     <div id="navigation_category_3">columns</div> 
     <div id="navigation_category_7">submit 
      <div id="navigation_container_7"> 
       <div class="navigation_link"><span style="margin-left: 10px;">submit</span></div> 
       <div class="navigation_link"><span style="margin-left: 10px;">applications</span></div> 
       <div class="navigation_link"><span style="margin-left: 10px;">points</span></div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS :

#navigation { 
    top: 0px !important; 
    width: 100%; 
    height: 60px; 
    background-color: #eee; 
    border-bottom: solid 3px #dd6a0c; 
    position: fixed; 
} 

#holder { 
    width: 960px; 
    margin: 0 auto; 
    height: inherit; 
} 

/* Navigation 
============================*/ 

#navigation_category_2, #navigation_category_3, #navigation_category_7 { 
    height: 60px; 
    float: left; 
    width: 120px; 
    text-align: center; 
    margin: 0 7px 0 8px; 
    cursor: pointer; 
    line-height: 60px; 
    font-family: Impact, Arial, sans-serif; 
    color: #111; 
    font-size: 18px; 
} 

#navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover { 
    background-color: #dd6a0c; 
    color: #eee; 
} 

#navigation_category_7:hover { 
    background-color: #eee; 
    color: #111; 
} 

#navigation_container_7 { 
    top: 0; 
    position: relative; 
    display: none; 
    width: 160px; 
    left: -24px; 
    border: 3px solid #dd6a0c; 
    border-top: none; 
    height: 0px; 
    background-color: #eee; 
} 

#navigation_category_7:hover #navigation_container_7 { 
    display: block; 
} 

.navigation_link { 
    top: 0; 
    width: inherit; 
    height: 26px; 
    text-align: left; 
    font-size: 11px; 
    font-family: Verdana; 
    color: #111; 
    line-height: 26px; 
    text-transform: capitalize; 
    font-weight: bold; 
} 

.navigation_link:hover { 
    background-color: #dd6a0c; 
    color: #eee; 
} 

Answer 1

에 당신의 메뉴에 대한 사용해서는 안 #navigation_conatiner_7

Answer 2

변화

#navigation_category_2:hover, 
#navigation_category_3:hover, 
#navigation_category_7:hover { 
background-color: #dd6a0c; 
color: #eee; 
} 

여기

코드입니다

#navigation_category_2:hover, 
#navigation_category_3:hover, 
#navigation_category_7:hover { 
background-color: #dd6a0c !important; 
color: #eee !important; 
} 

겹쳐 쓰기를 방지하려면 important를 추가하십시오.

Answer 3

은 다음과 같은 ID의 변경합니다 : 코드와

#navigation_category_7:hover { 
     background-color: #dd6a0c; 
     color: #111; 
    } 

Answer 4

문제는 당신이 본 색상이 실제로 컨테이너 내부에 붙여 넣은 링크에서 파생 된 것이 었습니다.

추가 된이

#navigation_category_7 #navigation_container_7 .navigation_link { 
background-color: #eee; 
} 

하고 작동합니다. CSS를 변경하는 http://jsfiddle.net/my5GV/2/

Answer 5

시도를 확인 :

#navigation_category_2:hover, #navigation_category_3:hover, #navigation_category_7:hover { 
    background-color: #dd6a0c; 
    color: #eee; 
} 

#navigation_category_7:hover { 
    background-color: #eee; 
    color: #111; 
} 

이

#navigation_category_2:hover, #navigation_category_3:hover {//you were calling #navigation_category_7 here to 
    background-color: #dd6a0c; 
    color: #eee; 
} 

#navigation_category_7:hover { 
    background-color: #eee; //this color is giving you the error, change if to 6 letter or rgba 
    color: #111; 
} 

Answer 6

에서 height=0px를 제거합니다. 대신 일이 같은 UL 및 리튬 태그를 사용해보십시오 :

는

HTML :

는

<ul> 
    <li><a href="LINK">MENU#1</a></li> 
    <li><a href="LINK">MENU#2</a> 
     <ul class="submenu-1"> 
      <li><a href="LINK">MENU#3</a> 
       <ul class="submenu-2"> 
        <li><a href="LINK">MENU#4</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
     <li><a href="LINK">MENU#5</a> 
     <ul class="submenu-1"> 
      <li><a href="LINK">MENU#6</a></li> 
     </ul> 
    </li> 
</ul> 

CSS는 : 나를 위해

ul li { 
    // All menus li 
} 
ul li ul { // All submenus 
    margin-top: 10px; 
    margin-left: 10px; 
} 
ul li ul li { // All submenus li 

} 
ul.submenu-1 { // UL > LI > UL 

} 
ul.submenu-2 { // UL > LI > UL > LI > UL 

}