CSS에서 전환이 작동하지 않습니다.

Question

드롭 다운 메뉴를 만들고 있습니다. 지금까지 모든 것이 작동하고 있습니다. 작동하지 않는 한 가지는 드롭 다운 메뉴가 나타날 때의 불투명도 변경입니다. 나는 또한 높이의 흐름을 추가하고 싶었다. 나는 전체 높이가 0.5 초 후에 자체적으로 나타나야한다.

이제 전환과 함께 이러한 일을 달성 할 수있을 것이라고 생각했지만 어떻게 든 작동하지 않습니다. 기본적으로

#nav-primary ul ul{ 
    position:absolute; 
    left:0px; 
    opacity: 0; 
    transition:opacity .5s ease-in-out; 
    -webkit-transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out; 
    -o-transition: opacity .5s ease-in-out; 
    z-index:497; 
} 

#nav-primary ul li:hover > ul { 
    opacity: 1; 
    position:absolute; 
    top:100%; 
    left:0; 
} 

나는 워드 프레스에서 wp_nav_menu을 사용하고 있습니다 :

wp_nav_menu(array('theme_location' => 'menu', 
        'link_before' => '<span>', 
        'link_after' => '</span>',)); 

구조를 다음과 같이해야합니다 :

당신의 CSS 코드에서

ul ...       // main-menu 
    li ... 
     ul ...     // sub-menu 
      li ... 
       <a> 
       <span> 
       </a> 

Answer 1

, 당신은 정상에 어떤 위치를 적용하지 가장 상위의 ul 요소. 어쩌면 오타일까요?

#nav-primary ul ul{ 

하지만 어쩌면 당신은 의미 :

첫 번째 행은

#nav-primary ul { 

당신의 제일 첫 번째 단계는 부모 UL를 설정하는 것입니다. 부모님 ul과 li에 위치 속성을 지정하지 않으면 자녀가 원하는 위치를 알 수 없습니다.

#nav-primary ul { 
    position:relative; 
} 

당신이 이미 가지고있는 몇 가지, 그리고 다른 기본적인 스타일로 그 결합, 그리고 당신이있어 :

당신이 장소에서 다른 기본 스타일을 가정 할 때,이 같은 당신이 필요로하는 모든 것입니다 당신의 방법에 :

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    display: block; 
    width: 300px; 
    height: 30px; 
    line-height: 30px; 
    color: black; 
    padding: 5px; 
    background: #aaa; 
} 

ul li li { 
    background: #ccc; 
} 

#nav-primary ul { 
    position:relative; 
} 

#nav-primary ul > li > ul { 
    display: block; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    transition:opacity .5s ease-in-out; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    opacity: 0; 
} 

#nav-primary ul > li:hover > ul { 
    opacity: 1; 
} 

여기에 직접보기 : 도움이 http://jsfiddle.net/jonthomas/27Ymw/1/

희망을!