CODEWITHSUNDEEP
javascripthtmlcssmenudrop-down-menu
Howdy_McGee
Howdy_McGee

Reputation: 10645

Hover Drop Down With Overflow

So I have this dropdown menu, when you hover over a link a dropdown menu pops up with overflow as auto. My problem is that as soon as I put my mouse over the bottom link or try to scroll it, the hover stops and the block disappears like its reached its height limit. It does this in Chrome and Firefox but works sorta fine in IE8. Suggestions on what I can do to fix this? Here's my code:

CSS

*{margin:0px; padding:0px}
#container{background-color:pink;padding:30px;width:300px;}
#dropMenu{display: none;
     height: 75px;
     overflow: auto;
     width: 200px;}

HTML

<div class="container">
    <a href="#" onMouseOver="menuOpen()">Hover This</a>
    <div id="dropMenu">
        <a href="#">Menu Item1</a><br />
        <a href="#">Menu Item2</a><br />
        <a href="#">Menu Item3</a><br />
        <a href="#">Menu Item4</a><br />
        <a href="#">Menu Item5</a><br />
        <a href="#">Menu Item6</a><br />
    </div>
</div>

Script

<script type="text/javascript">
    function menuOpen(){
        document.getElementById('dropMenu').style.display = 'block';
    }

    document.getElementById('dropMenu').onmouseout = function (e) {
        e = e || window.event;
        var target = e.srcElement||e.target;
        if (target.id == "dropMenu") {
            document.getElementById('dropMenu').style.display = 'none';
        }
    };
</script>

Before I get questions, assume my CSS is in my header in the right style tags, divs are in the body and script is before the ending body tag.

Upvotes: 2

Views: 7790

Answers (1)

MMM
MMM

Reputation: 7310

If you don't mind that the menu drops down when you hover over the pink container instead of just the link, you can use this CSS-only solution:

*{margin:0px; padding:0px}

#container{background-color:pink;padding:30px;width:300px;}

#dropMenu{display: none;
  height: 75px;
  overflow: auto;
  width: 200px;}

#container:hover #dropMenu {
  display:block;
}

No JavaScript needed. It's cleaner and works better. Have a look at my example on jsFiddle.

Upvotes: 2

Related Questions