0
제 코드를 확인하는 데 도움을주십시오. 내 페이드 아웃에는 한 가지 문제가 있습니다. 드롭 다운 메뉴 대신 흰색 상자가 사라집니다. 나는 내 CSS의 잘못된 점을 모른다. 온라인 정보 검색을 시도했지만 도움이되지 않는 것 같습니다. 감사합니다. 확인란에 대한 나의 코드는 다음 jsfiddle.net에 대한페이드 아웃이 제대로 작동하지 않습니다.
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>내 코드는 다음과 같습니다 [1]: https://jsfiddle.net/rnqajxtr/
{/ * 배경 색상 : 그래서 지금 CSS는 다음과 같습니다 흰색; * /}''하얀 상자를위한 코드가 사라집니다. –