0
私のコードを確認するのを手伝ってください。私のフェードアウトには1つの問題があり、ドロップダウンメニューの代わりに白いボックスがフェードアウトしています。私は自分の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/
{/ *背景色：だから今CSSは次のようになります白。 * /} ''白いボックスが消えるコード –