Question

我用链接创建了这个下拉菜单;当我将鼠标悬停在链接上时，菜单缩回到屏幕顶部，链接消失，就像我将鼠标完全从菜单中移开一样。这里发布：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();
}

Answer 1

您是否尝试过将<li>元素设置为在CSS中使用属性pointer-events: none？

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

1 个答案: