子菜單隱藏在外面的時候li

Question

有一個導航菜單，其設計如下圖所示。

現在，當我hover上About Us子菜單變得開放。

但是當我嘗試將光標移動到子菜單項，在sub-menu gets closed - 的原因是hover正在從li刪除。

我希望菜單保持打開狀態，直到光標到達子菜單項。

請注意：菜單和子菜單之間的空間必須保持原樣（如上圖中的紅色邊框所示）。

你可以找到的鏈接代碼，here

任何幫助，將不勝感激！

Answer 1

一個快速的解決方案：

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

乾杯！

Answer 2

你必須讓li有點高，所以它會覆蓋子菜單和這個特定li之間的空閒空間。在這種情況下，最簡單的解決方案是爲li內部的標籤添加邊距。如何實現這種效果將會有更多的解決方案（在li中添加填充並將背景顏色應用於標籤），但這是最快的一種。

搜索「添加」和「改變」的筆記中的CSS下面

#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

我做了什麼樣你問什麼，這可能給你一個想法。在YouTube上的教程中看到它只會下降。你可以用這個想法來解決你的問題。但是這適用於用戶點擊鏈接的時候。

.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>