자바 스크립트없이 CSS 드롭 다운 메뉴가 사라짐

자바 스크립트로 페이드 효과를 적용하려고했지만 약간의 문제가있었습니다. 나는 CSS로 전체적으로 작업하는 내 드롭 다운 메뉴를 얻을 수 있었지만, 어떤 이유로 든 부모가 될 때 메뉴를 페이드 인/페이드 아웃하는 방법을 알지 못합니다.자바 스크립트없이 CSS 드롭 다운 메뉴가 사라짐

jsfiddle

HTML

<body> 
<div id="header1"> 
<table width="100%" height="60px" border="0"> 
    <tr> 
    <td align="center"><ul id="horiznav"> 
    <li><a href="#" class='class2'>Home</a></li> 
    <li><a href="#" class='class2'>Statistics</a></li> 
    <li><a href="#" target="_blank" class='class2'>Overview</a></li> 
    <li><a href="#" class='class2'>Lists</a> 
     <ul> 
     <li><a href="#" class='class2'>All Active Projects</a></li> 
     <li><a href="#" class='class2'>By Phase</a></li> 
     <li><a href="#" class='class2'>By User</a></li> 
     <li><a href="#" class='class2'>Completed Projects</a></li> 
     </ul> 
    </li> 
    <li><a href="#" class='class2'>New Project</a></li> 
    <li><a href="#" class='class2'>Administration</a></li> 
    </ul></td></tr> 
</table> 
</div> 
</body>

CSS

#header1{ 
    background: #0d2965; 
    background-color: #0d2965; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    font-weight:bold; 
    color:#FFF; 
} 

ul#horiznav, #horiznav ul{/*remove the bullets from the dropdown ul as well*/ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    height:32px; 
    text-align:center 
} 

#horiznav li{ 
    display: inline-block; 
    /*float: left;*//*float the li element so the menu's horizontal...*/ 
    width:150px;/*...and set the width*/ 
    z-index: 1; 
    position:relative;/*set position:relative as the start point for absolutely positioning the dropdown*/ 
} 

#horiznav li a{ 
    display:block;/*make the link a block element...*/ 
    width:150px;/*...with a fixed width...*/ 
    line-height:30px;/*...and set the line-height to vertically centre the text*/ 
    text-align:center;/*horizontally centre the text...*/ 
    color:white;/*...colour it white...*/ 
    text-decoration:none;/*...and remove the default underline*/ 
    background-color:#EA9531;/*give the link an orange background...*/ 
    border:1px solid white/*...and a white border...*/ 
} 

#horiznav li a:hover{ 
    -webkit-transition:All 0.5s ease; 
    -moz-transition:All 0.5s ease; 
    -o-transition:All 0.5s ease; 
    color:#333333/*change the text colour on :hover*/ 
} 

#horiznav li ul{ 
    display:none;/*hide the dropdown*/ 
    position:absolute;/*position it absolutely..*/ 
    left:0;/*...align the left edge with the left edge of the parent li...*/ 
    top:32px/*...and 32px down from the top - 30px height + 2px for the border*/ 
} 

#horiznav li:hover ul { 
    display:block/*display the ul when the parent li is hovered*/ 
} 

#horiznav li ul a{ 
    background-color:#FFB33B/*give the dropdown a different background colour*/ 
}

사람이 올바른 방향으로 날 가리 키도록 어떤 아이디어 나 링크가 있습니까?

미리 감사드립니다.

출처

2014-11-16 cwaddilove

Transition은 display 속성에서 사용될 수 있습니다.

대신 visibility 및 opacity을 사용하십시오.

사용 나를 위해이 CSS

#horiznav li ul { 
    -webkit-transition:visibility 0.5s ease, opacity 0.5s ease; 
    -moz-transition:visibility 0.5s ease, opacity 0.5s ease; 
    -o-transition:visibility 0.5s ease, opacity 0.5s ease; 
    transition:visibility 0.5s ease, opacity 0.5s ease; 
    visibility:hidden; 
    opacity:0; 
    position:absolute; 
    left:0; 
    top:32px; 
} 

#horiznav li:hover ul { 
    visibility:visible; 
    opacity:1; 
}

Proof in JSFiddle

작품 잘.

출처

2014-11-17 00:05:09

비슷한 것을 시도했지만 효과가없는 것으로 보입니다. http://jsfiddle.net/1wLp2z1w/2/ – cwaddilove

코드를 업데이트했습니다. 이제는 정상적으로 작동합니다. :) (오늘 아침에 나는 내 전화에 있었고 그 당시에는 그것을 테스트 할 수 없었다) –

그 덕분에, 고마워! 문제가 해결 된 것은 무엇입니까? 불투명도 설정 또는 가시성 이었습니까? – cwaddilove

자바 스크립트없이 CSS 드롭 다운 메뉴가 사라짐

답변

관련 문제