2017-10-08 73 views
0

請幫我檢查我的代碼。我的淡出有一個問題,有一個白框淡出,而不是我的下拉菜單。我不知道我的CSS有什麼問題。 我已經嘗試過搜索在線信息,但它似乎沒有幫助。謝謝! 我的複選框代碼是:我的淡出功能無法正常工作

ul {font-family: Arial, Verdana; 
 
    font-size: 17px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none;} 
 

 
.dropdown{padding-top: 40px;} 
 

 
ul li{float:left; 
 
    display:inline; 
 
    position:relative; 
 
    padding:0px; 
 
    background-color:white; 
 
    text-decoration: none;} 
 
    
 
li ul {/*display:none;*/position:absolute; 
 
padding:10px; 
 
margin:0; 
 
visibility:hidden; 
 
opacity:0; 
 
transition-property: opacity,visibility; 
 
transition-duration: 0.8s,0s; 
 
transition-delay: 0s, .4s;} 
 

 
ul li a {display: block; 
 
text-decoration: none; 
 
color:white; 
 
border-top: 1px solid #ffffff; 
 
padding: 5px 15px 5px 15px; 
 
margin-left: 1px; 
 
white-space:nowrap;} 
 
ul li a:hover { background-color: rgba(0,173,239,0.8);} 
 
li:hover ul { display: block; position: absolute; } 
 
li:hover li { float: none;font-size: 11px; } 
 
li:hover a { background-color: rgba(0,173,239,0.8); } 
 
li:hover li a:hover { background-color: rgba(0,173,239,0.8); 
 
color:black; } 
 
nav ul li:hover ul{visibility:visible; opacity: 1;} 
 
#rectangle{ 
 
    width:600px; 
 
    height:100px; 
 
    background:blue; 
 
}
<nav class="dropdown" > 
 
    <ul> 
 
    \t <li><a href="" style="color:black">HOME</a></li> 
 
    \t <li><a href="" style="color:black">ABOUT</a> 
 
    \t <ul> 
 
    \t \t <li><a href="">The Team</a></li> 
 
    \t \t <li><a href="">History</a></li> 
 
    \t \t <li><a href="">Vision</a></li> 
 
    \t </ul> 
 
    \t </li> 
 
    \t <li><a href="" style="color:black">SERVICES</a> 
 
    \t <ul> 
 
    \t \t <li><a href="">1</a></li> 
 
    \t \t <li><a href="">2</a></li> 
 
    \t \t <li><a href="">3</a></li> 
 
    \t \t <li><a href="">4</a></li> 
 
    \t \t <li><a href="">5</a></li> 
 
    \t </ul> 
 
    \t </li> 
 
    \t <li><a href="" style="color:black">BOOK NOW</a> 
 
    \t <ul> 
 
    \t \t <li><a href="">Online</a></li> 
 
    \t \t <li><a href="">Right Here</a></li> 
 
    \t \t <li><a href="">Somewhere Else</a></li> 
 
    \t </ul> 
 
    \t </li> 
 
    \t <li><a href="" style="color:black">CONTACT US</a> 
 
    \t <ul> 
 
    \t \t <li><a href="">Online</a></li> 
 
    \t \t <li><a href="">Right Here</a></li> 
 
    \t \t <li><a href="">Somewhere Else</a></li> 
 
    \t </ul> 
 
    \t </li> 
 
    \t <li><a href="" style="color:black">CAREERS</a> 
 
    \t <ul> 
 
    \t \t <li><a href="">Online</a></li> 
 
    \t \t <li><a href="">Right Here</a></li> 
 
    \t \t <li><a href="">Somewhere Else</a></li> 
 
    \t </ul> 
 
    \t </li> 
 
    \t <li><a href="" style="color:black">FAQ</a> 
 
    \t <ul> 
 
    \t \t <li><a href="">Online</a></li> 
 
    \t \t <li><a href="">Right Here</a></li> 
 
    \t \t <li><a href="">Somewhere Else</a></li> 
 
    \t </ul> 
 
    \t </li> 
 
    </ul> 
 
</nav> 
 
<div id="rectangle"></div>

我對jsfiddle.net代碼: [1]: https://jsfiddle.net/rnqajxtr/

+2

刪除此''UL李{/ *背景顏色:白色; * /}白框的代碼淡出 –

回答

0

我改變transition-property: opacity, visibility;li ultransition-property: opacity;。所以,現在的CSS看起來是這樣的:

li ul { 
    /*display:none;*/ 
    position: absolute; 
    padding: 10px; 
    margin: 0; 
    visibility: hidden; 
    opacity: 0; 
    transition-property: opacity; 
    transition-duration: 0.8s, 0s; 
    transition-delay: 0s, .4s; 
} 

它似乎工作像你想讓它:https://jsfiddle.net/rnqajxtr/2/