我的導航下拉菜單在懸停時不會保持打開狀態

Question

我的導航下拉菜單出現問題。當我將它放在列表中時，它不會保持打開狀態。只要我離開最初的鏈接，它就會消失。我嘗試過，並且似乎無法找到問題。子菜單有時會打開，但在其他瀏覽器上它不會保持打開狀態。請幫忙。

CSS標記

nav { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    color:#FFF; 
    text-align:center; 
    max-width:960px; 
    margin-left:auto; 
    margin-right:auto; 
    text-decoration:none; 
    z-index:99; 
} 

nav ul li { 
    display:inline; 
    text-align:center; 
    color:#FFF; 
    text-decoration:none; 
    margin-left:30px; 
    margin-right:30px; 
    list-style-type:none; 
    position:relative; 
    padding:0; 
    height:auto; 
} 

nav ul li ul { 
    display:none; 
    position: absolute; 
    top: 100%; 
    width:800px; 
    background-color:#FFF; 
    transition: max-height 0.3s linear; 
    color:#171A58; 
    padding:2px; 
    height:auto; 
} 

nav ul li:hover ul { 
    display: block; 
    width:400px; 
    margin-top:10px; 
    padding:5px; 
    height:auto; 

} 

nav ul li ul li a { 
    display:block; 
    width:100%; 
    color:#171A58; 
    padding:7px; 
    text-align:left; 

} 

nav ul li ul li a:visited { 
    color:#171A58; 

} 
nav ul li ul li a:hover { 
    color:#F02204; 

} 
nav ul li ul li a:active { 
    color:#171A58; 

} 

HTML

<nav> 
<!--Top Navigation Links (top horizontal navigation bar)--> 
     <ul> 
      <li><a href="page.html">Home</a></li> 
      <li><a href="#.html">About</a> 
       <ul> 
        <li><a href="metro-chiefs.html">Metro Chiefs</a></li> 
        <li><a href="ccfd.html">Clark County Fire Department</a></li> 
       </ul> 
      </li> 
      <li><a href="https://www.regonline.com/Register/Checkin.aspx?EventID=1558172" class="nav1">Registration</a></li> 
      <li><a href="conference.html">Conference</a></li> 

      <li><a href="sponsors.html" class="nav1">Sponsors</a></li> 
      <li><a href="contact.html">Contact</a></li> 
     </ul> 
</nav> 

請幫助我。它一直在踢我的屁股。

Answer 1

這個問題似乎是在懸停狀態添加十個像素餘量（雖然我不知道爲什麼。）

nav ul li:hover ul { 
    display: block; 
    width:400px; 
    margin-top:10px; <-- removing this should fix it 
    padding:5px; 
    height:auto; 
} 

JSBin

Answer 2

它只是一個普通的問題，因爲你的下拉菜單中關係與懸停，如果你的鼠標了那麼哈弗偵探，你將無法創建一個下拉具有：懸停， 有另一種簡單而優雅方式做到這一點，也控制了每個方面。

你應該在JQuery中使用SlideToglle，你會發現一個幫助完整的文檔。在JQuery網站上。使用JavaScript

---

解決方案添加此CSS樣式你CSS

.show-sub { 
    display: block; 
    width:400px; 
    margin-top:10px; 
    padding:5px; 
    height:auto; 
} 

，並從你的CSS刪除此

nav ul li:hover ul { 
    display: block; 
    width:400px; 
    margin-top:10px; 
    padding:5px; 
    height:auto; 

} 

和modifie你的HTML

<li><a id ="item" onmouseover="showmenu(this)" href="#.html">About</a> 
     <ul id="sub-menu"> 
      <li><a href="metro-chiefs.html">Metro Chiefs</a></li> 
      <li><a href="ccfd.html">Clark County Fire Department</a></li> 
     </ul> 
    </li> 

加這個腳本給你的html，

<script> 
    var item = document.getElementById('item'); 
    function showmenu() { 
    var submenu = document.getElementById('sub-menu'); 
    submenu.className = "show-sub"; 
    } 

</ script> 

這是一個與我

Answer 3

工作的：懸停選擇用於選擇當過他們，你鼠標的元素。