Question

我的导航下拉菜单出现问题。当我将鼠标悬停在列表中时，它不会保持打开状态。一旦我徘徊在初始链接上，它就会消失。我已经尝试过并且似乎无法找到问题。子菜单有时打开，但在其他浏览器上它永远不会打开。请帮忙。

CSS Mark up

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

这是一个正常的问题，因为您的下拉菜单是关系并悬停，如果您将鼠标移出悬停侦探，您将无法创建下拉：hover，有另一种简单而优雅的方法可以做到这一点，你也可以控制每个方面。

你应该在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;

}

并将您的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 2

：鼠标悬停选择器用于在鼠标悬停时选择元素。

Answer 3

问题似乎是在悬停状态下添加的十个像素边距（虽然我不知道为什么。）

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

JSBin

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

3 个答案: