我的导航下拉菜单在悬停时不会保持打开状态

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

工作的：悬停选择用于选择当过他们，你鼠标的元素。