html - 我的淡出不能正常工作

Question

请帮我检查一下我的代码。我的淡出有一个问题，有一个白框淡出而不是我的下拉菜单。我不知道我的 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>
  	<li><a href="" style="color:black">HOME</a></li> 
  	<li><a href="" style="color:black">ABOUT</a> 
  	  <ul>
  		<li><a href="">The Team</a></li>
  		<li><a href="">History</a></li> 
  		<li><a href="">Vision</a></li> 
  	  </ul> 
  	</li> 
  	<li><a href="" style="color:black">SERVICES</a> 
  	  <ul> 
  		<li><a href="">1</a></li> 
  		<li><a href="">2</a></li> 
  		<li><a href="">3</a></li> 
  		<li><a href="">4</a></li> 
  		<li><a href="">5</a></li> 
  	  </ul> 
  	</li>
  	<li><a href="" style="color:black">BOOK NOW</a> 
  	  <ul> 
  		<li><a href="">Online</a></li> 
  		<li><a href="">Right Here</a></li> 
  		<li><a href="">Somewhere Else</a></li> 
  	  </ul> 
  	</li> 
  	<li><a href="" style="color:black">CONTACT US</a> 
  	  <ul> 
  		<li><a href="">Online</a></li> 
  		<li><a href="">Right Here</a></li> 
  		<li><a href="">Somewhere Else</a></li> 
  	  </ul> 
  	</li> 
  	<li><a href="" style="color:black">CAREERS</a> 
  	  <ul> 
  		<li><a href="">Online</a></li> 
  		<li><a href="">Right Here</a></li> 
  		<li><a href="">Somewhere Else</a></li> 
  	  </ul> 
  	</li> 
  	<li><a href="" style="color:black">FAQ</a> 
  	  <ul> 
  		<li><a href="">Online</a></li> 
  		<li><a href="">Right Here</a></li> 
  		<li><a href="">Somewhere Else</a></li> 
  	  </ul> 
  	</li> 
  </ul>   
</nav>
<div id="rectangle"></div>

我的 jsfiddle.net 代码是: [1]: https://jsfiddle.net/rnqajxtr/

Answer 1

我将 transition-property: opacity, visibility; for li ul 更改为 transition-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/