0

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();
}
l_owbar
  • 43
  • 5
  • 2
    I believe your problem is that since `Ascii Platformer` container is a separate element, your JS treats it as a mouseout (triggering nm_MouseOut()) once it is hit and hides the container. – Blunderfest May 21 '14 at 19:18
  • Any idea how to get around that? I've tried everything I could think of. – l_owbar May 21 '14 at 19:23
  • I would look at this question: http://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div Although you don't have an absolute div, looks like the onmouseout event is what is firing when you don't want it to. – Blunderfest May 21 '14 at 19:55
  • 1
    Could you try changing the events to onmouseenter and onmouseleave instead as described here: http://jquery-howto.blogspot.dk/2009/04/problems-with-jquery-mouseover-mouseout.html – Simon Thordal May 21 '14 at 20:35
  • Yea, I'll go ahead and learn jQuery and get that out of the way. Thanks. – l_owbar May 22 '14 at 12:05

1 Answers1

0

Have you tried setting your <li> element to have the attribute pointer-events: none in the CSS?

Simon Thordal
  • 893
  • 10
  • 28
  • Didn't know I could do that. I tried it, but now the link won't work at all, but that's a useful attribute to know. – l_owbar May 21 '14 at 20:16