CSS 메뉴에 드롭 다운 전환 추가하기

-webkit-transition : all 1s ease;를 추가하고 싶습니다. 또는 내 CSS 드롭 다운 메뉴와 비슷한,하지만 내 인생에 대해 그것을 올바르게 배치 할 수 있도록 배치 할 수 없습니다. 메가 드롭 다운이있는 첫 번째 .nav 규칙의 스타일링 내에서 직접 배치했습니다.CSS 메뉴에 드롭 다운 전환 추가하기

.nav > li > div { 
position: absolute; 
left: 0; 
top: 43px; 
display: none; 
-webkit-transition: all 1s ease; 
background: #fff; 
padding: 20px 20px; 
box-shadow: 0 2px 3px rgba(0,0,0,0.1); 
}

그러나 작동하지 않습니다.

누군가가 또한 CSS의 올바른 위치에 z 색인을 배치했는지에 관해서 나에게 조언 할 수 있다면.

드롭 다운 메뉴가 시작된 후와 위치 스타일이 지정된 직후입니다. 이것이 올바른 장소입니까?

메뉴의 드롭 다운 목록 앞에 표시되는 이미지를 중지해야하지만 내 파일 호스트 (Google)에서 현재 공유 링크에 액세스하도록 허용하지 않아서 테스트 할 수 없습니다. 상관 사례 및 솔루션은 매우 환영 테스트 http://cdpn.io/lznko

: 여기

는 코드입니다.

출처

2013-08-14 user2660470

'display : none'과 'display : block'사이에 CSS 전환이 없습니다. CSS 전환을 적용하려면 다른 방법으로 메뉴를 숨기거나 표시해야합니다. – robooneus

가능한 복제본 : http://stackoverflow.com/questions/4178567/webkit-transition-with-display – AdityaSaxena

감사합니다. Robooneus. 나는 Anons 응답에 지쳤으므로 당신이 옳다고 생각하지만 작동하지 않았습니다. 문제는 다른 요소를 엉망으로 만들지 않고 다른 방법으로 메뉴를 숨기고 표시하는 방법을 모르겠다는 것입니다. 나는이 모든 일에 여전히 매우 새롭다. 물론 다른 튜토리얼을 사용할 수는 있지만이 100 %를 편집하는 방법을 배우는 것이 좋을 것이라고 생각했습니다. Aditya는 포스트가 엄격하게 전이에 대해 감사하고 있습니다. Z- 인덱스를 배치하여 메뉴 앞에 오는 이미지를 멈추는 데 도움이되기를 바랍니다. – user2660470

.nav > li > div{ 
    height: 0; 
    overflow: hidden; 
    -webkit-transition: height 200ms linear; 
    -moz-transition: height 200ms linear; 
    -ms-transition: height 200ms linear; 
    -o-transition: height 200ms linear; 
    transition: height 200ms linear; 
} 
.nav > li:hover > div{height: 200px;}

출처

2013-08-14 14:18:47 Anon

고마워요, 그게 작동하지 않았어 = ( – user2660470

CSS 메뉴에 드롭 다운 전환 추가하기

답변

관련 문제