바깥쪽에 숨어있을 때 하위 메뉴 숨기기

Question

탐색 메뉴가 있습니다. 디자인은 아래 이미지와 같습니다. 이제

, I hoverAbout Us에 하위 메뉴가 열려 가져옵니다.

그러나 커서를 하위 메뉴 항목으로 이동하려고 시도하면 이 li에서 제거되고있는 이유는 sub-menu gets closed입니다.

커서가 하위 메뉴 항목에 도달 할 때까지 메뉴가 열린 상태로 유지하려고합니다.

참고 : 메뉴와 하위 메뉴 사이의 간격은 그대로 유지해야합니다 (위 이미지에서 빨간색 테두리로 표시된 것처럼). 당신은 코드에 대한 링크를 찾을 수 있습니다

, here

어떤 도움을 주시면 감사하겠습니다!

Answer 1

빠른 해결책 :

ul#nav li:hover > ul {margin: 40px 0 0 0; border-top: 10px solid #b58d69; } 

건배!

Answer 2

조금 더 높게 만들어야하므로 하위 메뉴와이 특정 리 사이의 여유 공간을 포함하게됩니다. 이 경우 가장 간단한 해결책은 li 내부의 주 태그에 여백을 추가하는 것이 었습니다. 이 효과를 얻는 방법에 대한 더 많은 해결책이있을 것입니다. (리 내부에 패딩을 추가하고 태그에 배경색을 적용하는 방법)이 방법이 가장 빠릅니다. "추가"를위한

검색 난 당신을 요구하고 이것은 당신에게 아이디어를 줄 수있는 어떤 식으로 뭔가를했을

#menu { 
     width: 960px; 
     height: 40px; 
     clear: both; 
    } 

    ul#nav { 
     float: left; 
     width: 960px; 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     background: #b58d69 url(../img/menu-parent.png) repeat-x; 
     -moz-border-radius-topright: 10px; 
     -webkit-border-top-right-radius: 10px; 
     -moz-border-radius-topleft: 10px; 
     -webkit-border-top-left-radius: 10px; 
    } 

    ul#nav li { 
     display: inline-block; /*changed*/ 
     padding-bottom: 10px; /*added*/ 
     position: relative; /*added*/ 
    } 

    ul#nav li a { 
     float: left; 
     font: bold 1.1em arial, verdana, tahoma, sans-serif; 
     line-height: 40px; 
     color: #fff; 
     text-decoration: none; 
     margin: 0; 
     padding: 0px 20px; 
     background: #b58d69 url(../img/menu-parent.png) repeat-x; 
     -moz-border-radius-topright: 10px; 
     -webkit-border-top-right-radius: 10px; 
     -moz-border-radius-topleft: 10px; 
     -webkit-border-top-left-radius: 10px; 
    } 
    ul#nav li a.plus_a { /*added*/ 
     position: absolute; 

    } 
    ul#nav .current a, ul#nav li:hover > a { 
     color: #b58d69; 
     text-decoration: none; 
     background: #30251b; 
     -moz-border-radius-topright: 10px; 
     -webkit-border-top-right-radius: 10px; 
     -moz-border-radius-topleft: 10px; 
     -webkit-border-top-left-radius: 10px; 
    } 

    ul#nav ul { 
     display: none; 
    } 

    ul#nav li:hover > ul { 
     position: absolute; 
     width: 920px; 
     height: 45px; 
     position: absolute; 
     margin: 50px 0 0 0; 
     background: #fff; 
     -moz-border-radius-bottomright: 10px; 
     -webkit-border-bottom-right-radius: 10px; 
     -moz-border-radius-bottomleft: 10px; 
     -webkit-border-bottom-left-radius: 10px; 
    } 

    ul#nav li:hover > ul li a { 
     float: left; 
     font: bold 1.1em arial, verdana, tahoma, sans-serif; 
     line-height: 45px; 
     color: #b58d69; 
     text-decoration: none; 
     margin: 0; 
     padding: 0 20px 0 0; 
     background: #fff; 
    } 

    ul#nav li:hover > ul li a:hover { 
     color: #30251b; 
     text-decoration: none; 
     text-shadow: none; 
    } 

    ul#nav li:hover > ul { 
     display:block !important; 
    } 

Answer 3

아래 CSS에서 메모를 "변경". 튜토리얼에서 유튜브에 CSS를 단지 드롭 다운 봤어. 당신은 당신의 문제를 해결하기위한이 아이디어를 사용할 수 있습니다. 그러나 이것은 사용자가 링크를 클릭 할 때 작동합니다.

.fixed-nav-container { 
 
    height: 90px; 
 
    width: 100%; 
 
    background-color: #111; 
 
    position: fixed; 
 
    z-index: 16; 
 
} 
 
.fixed-nav-container:hover { 
 
    opacity: 1; 
 
} 
 
.fixed-nav .active { 
 
    padding: 23px 0px; 
 
    background-color: #2a2730; 
 
    box-shadow: inset 0 3px 7px black; 
 
} 
 
.fixed-nav { 
 
    width: 100%; 
 
    height: 70px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.fixed-nav ul { 
 
    display: block; 
 
    text-align: center; 
 
} 
 
.fixed-nav ul li { 
 
    display: inline-block; 
 
    padding: 20px 15px; 
 
    font-weight: bold; 
 
    width: 15%; 
 
    border-right: 2px solid #2a2730; 
 
} 
 
.fixed-nav ul li:last-child { 
 
    border-right: 0px; 
 
} 
 
.fixed-nav ul li a { 
 
    text-decoration: none; 
 
    color: silver; 
 
    transition: all linear 0.5s; 
 
    -webkit-transition: all linear 0.5s; 
 
    padding: 10px 0px; 
 
} 
 
.fixed-nav ul li a:hover { 
 
    font-size: medium; 
 
    transition: all linear 0.2s; 
 
    -webkit-transition: all linear 0.2s; 
 
} 
 
.fixed-nav-content { 
 
    position: absolute; 
 
    top: 70px; 
 
    overflow: hidden; 
 
    background-color: #111111; 
 
    color: #FFFFFF; 
 
    max-height: 0px; 
 
} 
 
.fixed-nav-content a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
} 
 
.fixed-nav-content a:hover { 
 
    background-color: silver; 
 
    box-shadow: inset 0 3px 7px black; 
 
    color: #2a2730; 
 
} 
 
.fixed-nav-content:active { 
 
    max-height: 400px; 
 
} 
 
.fixed-nav-sub ul { 
 
    padding: 0px; 
 
    list-style-type: none; 
 
    text-align: left; 
 
} 
 
.fixed-nav-sub ul li { 
 
    width: 20%; 
 
} 
 
.fixed-nav-sub ul li a { 
 
    padding: 10px; 
 
    display: inline-block !important; 
 
    background-color: #2a2730; 
 
    box-shadow: inset 0 3px 7px black; 
 
} 
 
.nav-item:focus { 
 
    background-color: #2a2730; 
 
    padding: 10px; 
 
    box-shadow: inset 0 3px 7px black; 
 
} 
 
.nav-item:hover ~ .fixed-nav-content { 
 
    max-height: 400px; 
 
    transition: max-height 0.4s linear; 
 
}

<div class="fixed-nav-container"> 
 
    <nav class="fixed-nav"> 
 
     <ul> 
 
      <li> 
 
       <a href="#" class="nav-item">About</a> 
 
       <div class="fixed-nav-content"> 
 
        <div class="fixed-nav-sub"> 
 
         <ul> 
 
          <li><a href="about.php">About Us</a></li> 
 
          <li><a href="team.php">Meet The team</a></li> 
 
          <li><a href="recent.php">Recent Projects</a></li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </li> 
 
      <li> 
 
       <a href="#" class="nav-item">Services</a> 
 
       <div class="fixed-nav-content"> 
 
        <div class="fixed-nav-sub"> 
 
         <ul> 
 
          <li><a href="civilworks.php">Civil Works</a></li> 
 
          <li><a href="electrical.php">Electrical</a></li> 
 
          <li><a href="watereng.php">Water Engineering</a></li> 
 
          <li><a href="telecoms.php">Telecoms</a></li> 
 
          <li><a href="it.php">Info. Technology</a></li> 
 
          <li><a href="renewable.php">Renewable Energy</a></li> 
 
          <li><a href="consulting.php">Consulting</a></li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
</div>