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

Question

I made this drop down menu with a link; When I hover over the link the menu retracts to the top of the screen and the link disappears like I moved the mouse off of the menu completely. Here it is published: 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>元素设置为具有pointer-events: none属性pointer-events: none CSS中pointer-events: none ？

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

Question

1 answers

solution1
0 2014-05-21 19:39:19

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

Question

1 answers

solution1 0 2014-05-21 19:39:19

solution1
0 2014-05-21 19:39:19