当我将鼠标悬停在项目上时，我的CSS/JS下拉菜单不会保持在下

My CSS/JS drop down menu won't stay down when I hover over the items

本文关键字：下拉菜单 JS CSS 鼠标 悬停 项目 我的      更新时间：2023-09-26

我为这个下拉菜单添加了一个链接;当我将鼠标悬停在链接上时，菜单收缩到屏幕顶部，链接就像我将鼠标完全移出菜单一样消失了。这里是它的发布:http://camron.onyxtek.com/

Html: 

<body>
    <div id="navigation">
        <ul id="navlist">
            <li class="titleli">
                <a href="/" target="_self" id="titlelink">Some Title</a>
            </li>
            <li class="breadcrumb" id="bc1" onmouseover="bc1_MouseOver()"><p class="bctitle">Projects</p></li>
            <li class="breadcrumb" id="bc2" onmouseover="bc2_MouseOver()"><p class="bctitle">Stuff</p></li>
        </ul>
    </div>
    <div id="navmenu" onmouseover="nm_MouseOver()" onmouseout="nm_MouseOut()">
        <ul id="ml1" class="menulist">
            <li class="menuli">
                <a class="menulink" href="/Main/AsciiPlatformer">Ascii Platformer</a>
            </li>
        </ul>
    </div>
    <div class="container">
        @RenderBody() 
    </div>
</body>
CSS: 

#navigation, #navlist {
    width: auto;
    height: 50px;
}
#navigation {
    background-color: #888;
    margin: 0;
    padding: 0;
}
#navmenu {
    background-color: #aaa;
    position: relative;
    margin: 0, 0, 10px, 0;
    height: 3px;
    transition: height linear 0.25s;
}
#navlist {
    list-style: none;
    display: block;
    clear: left;
}
#navlist li {
    float: left;
    display: block;
    height: inherit;
    margin-right: 10px;
}
#titleli {
    background-color: #aaa;
}
#titlelink {
    font-family: "Lucida Console", Monaco, monospace;
    color: #ddd;
    font-size: 25px;
    text-decoration: none;
    display: block;
    margin: 12px 2px 0 10px;
}
.breadcrumb {
    background-color: #999;
    border-left: 2px solid #aaa;
    border-right: 2px solid #aaa;
    width: 100px;
}
.menulist {
    display: none;
    position: absolute;
    list-style: none;
    clear: left;
}
.menulink {
    font-family: "Courier New", Courier, monospace;
    color: #ddd;
    font-size: 15px;
    text-decoration: none;
    display: block;
    margin: 10px 0 0 10px;
}
.bctitle {
    font-family: "Courier New", Courier, monospace;
    color: #ddd;
    font-size: 15px;
    text-decoration: underline;
    display: block;
    margin: 18px 0 0 8px;
}
body {
    background-color: #ddd;
}
body, div, ul, li, a {
    margin: 0;
    padding: 0;
    border: 0;
}
JavaScript: 

var menuHover = false;
function resetColors() {
    document.getElementById("bc1").style.backgroundColor = "#999";
    document.getElementById("bc2").style.backgroundColor = "#999";
}
function showMenu(index, bool) {
    if (bool) {
        document.getElementById("ml" + index).style.display = "block";
    } else {
        document.getElementById("ml" + index).style.display = "none";
    }
}
function bc1_MouseOver() {
    resetColors();
    document.getElementById("navmenu").style.height = "200px";
    showMenu(1, true);
    document.getElementById("bc1").style.backgroundColor = "#aaa";
}
function bc2_MouseOver() {
    resetColors();
    document.getElementById("navmenu").style.height = "200px";
    showMenu(1, false);
    document.getElementById("bc2").style.backgroundColor = "#aaa";
}
function nm_MouseOver() {
    menuHover = true;
}
function nm_MouseOut() {
    menuHover = false;
    document.getElementById("navmenu").style.height = "3px";
    showMenu(1, false);
    resetColors();
}

您是否尝试将您的<li>元素设置为在CSS中具有属性pointer-events: none ?

相关文章：