호버에서 div를 숨기는 방법은 무엇입니까?

나는 다음과 같습니다 내 사이트에 대한 헤더있어 : 긴 코드에 대한호버에서 div를 숨기는 방법은 무엇입니까?

.header-cont { 
    width:100%; 
    position:fixed; 
    top:0px; 
} 
.header { 
    height:50px; 
    background:#F0F0F0; 
    border:1px solid #CCC; 
    width:950px; 
    margin:0px auto; 
} 
.header-button { 
    background: #73e3eb; 
    background-image: -webkit-linear-gradient(top, #73e3eb, #5ec9d1); 
    background-image: -moz-linear-gradient(top, #73e3eb, #5ec9d1); 
    background-image: -ms-linear-gradient(top, #73e3eb, #5ec9d1); 
    background-image: -o-linear-gradient(top, #73e3eb, #5ec9d1); 
    background-image: linear-gradient(to bottom, #73e3eb, #5ec9d1); 
    -webkit-border-radius: 13; 
    -moz-border-radius: 13; 
    border-radius: 13px; 
    font-family: Lora; 
    color: #6293ad; 
    font-size: 20px; 
    padding: 20px 15px 10px 15px; 
    text-decoration: none; 
} 
.clearfix:after { 
    display:block; 
    clear:both; 
} 
.menu-wrap { 
    width:100%; 
    box-shadow:0px 1px 3px rgba(0,0,0,0.2); 
    background:#3e3436; 
} 
.menu { 
    width:1000px; 
    margin:0px auto; 
} 
.menu li { 
    margin:0px; 
    list-style:none; 
    font-family:'Ek Mukta'; 
} 
.menu a { 
    transition:all linear 0.15s; 
    color:#919191; 
} 
.menu li:hover > a, .menu .current-item > a { 
    text-decoration:none; 
    color:#be5b70; 
} 
.menu .arrow { 
    font-size:11px; 
    line-height:0%; 
} 
.menu > ul > li { 
    float:left; 
    display:inline-block; 
    position:relative; 
    font-size:19px; 
} 
.menu > ul > li > a { 
    padding:10px 40px; 
    display:inline-block; 
    text-shadow:0px 1px 0px rgba(0,0,0,0.4); 
} 
.menu > ul > li:hover > a, .menu > ul > .current-item > a { 
    background:#2e2728; 
} 
.menu li:hover .sub-menu { 
    z-index:1; 
    opacity:1; 
} 
.sub-menu { 
    width:150px; 
    padding:5px 0px; 
    position:absolute; 
    top:100%; 
    left:0px; 
    z-index:-1; 
    opacity:0; 
    transition:opacity linear 0.15s; 
    box-shadow:0px 2px 3px rgba(0,0,0,0.2); 
    background:#2e2728; 
} 
.sub-menu li { 
    display:block; 
    font-size:16px; 
} 
.sub-menu li a { 
    padding:10px 30px; 
    display:block; 
} 
.sub-menu li a:hover, .sub-menu .current-item a { 
    background:#3e3436; 
}

<html> 
    <head></head> 
    <body> 
     <div class="header-cont"> 
      <div class="header"> 
       <div class="menu-wrap"> 
        <nav class="menu"> 
         <ul class="clearfix"> 
          <li class="current-item"><a href="#">Home</a></li> 
          <li><a href="#"><span class="arrow">&#9660;</span>Sites</a> 
           <ul class="sub-menu"> 
            <li><a href="#">Site A</a></li> 
            <li><a href="#">Site B</a></li> 
            <li><a href="#">Site C</a></li> 
            <li><a href="#">Site D</a></li> 
           </ul> 
          </li> 
          <li><a href="#">About</a></li> 
         </ul> 
        </nav> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

죄송합니다,하지만 거기입니다. 내 문제는 '사이트'항목 아래 영역 위로 마우스를 가져 가면 드롭 다운 목록 인 div가 표시된다는 것입니다. 나는 그것을 변경하여 '사이트'에 올려 놓을 때만 표시되도록하고 싶습니다. 그러나 확실하지 않습니다. 밖에있는 사람 있니?

출처

2014-12-20 rivermont - Will B.

아래의 답변으로 도움이 되었다면 다른 사람들이 유용하다는 것을 알 수 있도록 허용 된 것으로 표시해야합니다 (옆에있는 체크 표시를 클릭하십시오). – TylerH

opacity 속성을 사용하는 대신 visibility 속성을 사용해야합니다. opacity 속성은 단순히 요소를 투명하게 만듭니다. visibility 속성은 요소를 완전히 숨기지 만 요소의 간격을 문서의 정상적인 흐름에 유지합니다.

JSFiddle Example

.menu li:hover .sub-menu { 
    visibility: visible; 
} 

.sub-menu { 
    width:150px; 
    padding:5px 0px; 
    position:absolute; 
    top:100%; 
    left:0px; 
    visibility: hidden; 
    transition:opacity linear 0.15s; 
    box-shadow:0px 2px 3px rgba(0,0,0,0.2); 
    background:#2e2728; 
}

는 또한 z-index 속성을 필요가 없습니다.

display: none; 및 display: block;도 사용할 수 있습니다. visibility 속성과 동일한 기능을 수행하지만 문서의 일반적인 흐름에서 간격을 유지하지 않습니다.

출처

2014-12-20 23:18:34 TylerH

감사! 이것은 정말로 도움이되었습니다. –

호버에서 div를 숨기는 방법은 무엇입니까?

답변

관련 문제