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/
刪除此''UL李{/ *背景顏色:白色; * /}白框的代碼淡出 –