拖放子菜單消失懸停

Question

雖然我知道有幾個關於這個問題的討論，但沒有任何解決方案解決了我的問題。無論我做什麼，我試圖使用的CSS子菜單都會在您停在父li上方後消失。我沒有絲毫的想法可能會導致這種情況，我真的一直在盯着這永遠試圖找到解決方案，而不能。我嘗試添加頂部：px;到CSS中的子菜單，這允許我選擇子菜單選項，但是它也移動了菜單，使得它看起來覆蓋並居中在父親li上，這對我也不好，因爲我需要它直接出現在下面。頭部可以剪裁它，如果是的話，我需要添加什麼來改變它？所有的幫助非常感謝！

.nav ul { 
 
    list-style: none; 
 
    background-color: #444; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    font-size: 1.2em; 
 
    line-height: 40px; 
 
    text-align: left; 
 
    display: none; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    padding-left: 15px; 
 
    transition: .3s background-color; 
 
} 
 
.nav a:hover { 
 
    background-color: #005f5f; 
 
} 
 
.nav a.active { 
 
    background-color: #aaa; 
 
    color: #444; 
 
    cursor: default; 
 
} 
 
/* Sub Menus */ 
 

 
.nav li li { 
 
    font-size: .8em; 
 
} 
 
@media screen and (min-width: 650px) { 
 
    .nav li { 
 
    width: 130px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.4em; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 
    .nav a { 
 
    border-bottom: none; 
 
    } 
 
    .nav > ul > li { 
 
    text-align: center; 
 
    } 
 
    .nav > ul > li > a { 
 
    padding-left: 0; 
 
    } 
 
    /* Sub Menus */ 
 
    .nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    } 
 
    .nav li:hover ul { 
 
    display: block; 
 
    } 
 
    .nav li ul li { 
 
    display: block; 
 
    } 
 
} 
 
#header { 
 
    float: left; 
 
    background-color: #ffffff; 
 
    cursor: default; 
 
    padding: 1.75em 2em 0em 0em; 
 
    position: relative; 
 
}

<header> 
 
    <img id="logo" src="images/logo.jpg" alt="logo"> 
 
    <div class="nav"> 
 
    <ul> 
 
     <li class="home"><a href="#">Home</a> 
 
     </li> 
 
     <li class="tutorials"><a href="#">Tutorials</a> 
 
     <ul> 
 
      <li><a href="#">Tutorial #1@@</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #2</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="about"><a class="active" href="#">About</a> 
 
     </li> 
 
     <li class="news"><a href="#">Newsletter</a> 
 
     <ul> 
 
      <li><a href="#">News #1</a> 
 
      </li> 
 
      <li><a href="#">News #2@@@</a> 
 
      </li> 
 
      <li><a href="#">News #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="contact"><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>

Answer 1

我做了最後算出來，但認爲我應該回來，更新我的解決方案，如果它是有幫助的是誰具有類似問題的人。這其實很簡單。

我不得不添加一個z-index的位置：

 .nav li:hover ul { 
      display: block; 
      z-index: 99999; 
     } 

這被推薦給其他用戶，我也嘗試開始，但沒有把它放在李：懸停因此它沒有工作。我猜是因爲高Z指數迫使它到達頂部，所以通過將子菜單置於其上方來停止導致剪輯的任何事情。我必須誤讀沿線的某個地方，並將z-index放在錯誤的部分。這裏真正的解決方案可能是仔細閱讀你的代碼！

Answer 2

它已經工作，我猜。

您有以下CSS，這保證了菜單顯示只有hover：

.nav li:hover ul { 
    display: block; 
} 

見，當我把它註釋掉，並使用此屏幕上點擊子菜單它是如何工作的：

$('.nav > ul > li').click(function(){ 

    $(this).find('ul').show(); 

}); 

請讓我知道你的想法。謝謝！

$('.nav > ul > li').click(function(){ 
 
    
 
    $(this).find('ul').show(); 
 
    
 
});

.nav ul { 
 
    list-style: none; 
 
    background-color: #444; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    font-size: 1.2em; 
 
    line-height: 40px; 
 
    text-align: left; 
 
    display: none; 
 
} 
 
.nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
    padding-left: 15px; 
 
    transition: .3s background-color; 
 
} 
 
.nav a:hover { 
 
    background-color: #005f5f; 
 
} 
 
.nav a.active { 
 
    background-color: #aaa; 
 
    color: #444; 
 
    cursor: default; 
 
} 
 
/* Sub Menus */ 
 

 
.nav li li { 
 
    font-size: .8em; 
 
} 
 
@media screen and (min-width: 650px) { 
 
    .nav li { 
 
    width: 130px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.4em; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 
    .nav a { 
 
    border-bottom: none; 
 
    } 
 
    .nav > ul > li { 
 
    text-align: center; 
 
    } 
 
    .nav > ul > li > a { 
 
    padding-left: 0; 
 
    } 
 
    /* Sub Menus */ 
 
    .nav li ul { 
 
    position: absolute; 
 
    display: none; 
 
    width: inherit; 
 
    } 
 
    /*.nav li:hover ul { 
 
    display: block; 
 
    }*/ 
 
    .nav li ul li { 
 
    display: block; 
 
    } 
 
} 
 
#header { 
 
    float: left; 
 
    background-color: #ffffff; 
 
    cursor: default; 
 
    padding: 1.75em 2em 0em 0em; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <img id="logo" src="images/logo.jpg" alt="logo"> 
 
    <div class="nav"> 
 
    <ul> 
 
     <li class="home"><a href="#">Home</a> 
 
     </li> 
 
     <li class="tutorials"><a href="#">Tutorials</a> 
 
     <ul> 
 
      <li><a href="#">Tutorial #1@@</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #2</a> 
 
      </li> 
 
      <li><a href="#">Tutorial #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="about"><a class="active" href="#">About</a> 
 
     </li> 
 
     <li class="news"><a href="#">Newsletter</a> 
 
     <ul> 
 
      <li><a href="#">News #1</a> 
 
      </li> 
 
      <li><a href="#">News #2@@@</a> 
 
      </li> 
 
      <li><a href="#">News #3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="contact"><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</header>