1

I'm trying to make a menu that will fade in a drop submenu when the main menu's buttons (those that have submenus) are hovered over.

The problem is I have mouseleave to make the submenu's div fadeout. If a user hovers over the main button with a submenu and doesnt go into the submenu's div, the submenu's div will stay on the screen.

<style type="text/css">
    .dropmenu{
        padding:10px 5px 5px 5px;margin-top:14px;display:none;background:#000000;position:absolute;font:normal 14px arial;color:#ffffff;z-index:3;
    }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        $('#popm').mouseover(function() {
            $('#x3').fadeIn("fast", "linear");
        });
        $('#x3').mouseleave(function() {
            $('#x3').fadeOut("fast", "linear");
        });
    });
</script>

<a class="wblinks" id="popm" href="popular.asp">Popular&#x25BC;</a>
<div id="x3" class="dropmenu" style="margin-left:124px;">
    <a class="more" href="popular.asp?t=td">Popular Today</a><br />
    <a class="more" href="popular.asp?t=wk">Popular Week</a><br />
    <a class="more" href="popular.asp?t=mn">Popular Month</a><br />
    <a class="more" href="popular.asp?t=6mn">Popular 6 Months</a><br />
    <a class="more" href="popular.asp?t=yr">Popular 1 Year</a><br />
    <a class="more" href="popular.asp">All Time</a><br />
</div>

How do I make it so the div will disappear on its own, when not hovered over?

tw16
  • 29,215
  • 7
  • 63
  • 64
Patriotec
  • 399
  • 1
  • 6
  • 21

2 Answers2

1

You can set a timer when you mouseout of #popm. Then clear the timer if the user mouses over the dropdown menu. http://jsfiddle.net/jUuVz/

Will
  • 19,661
  • 7
  • 47
  • 48
  • +1 for good idea with no need for extra html markup. I can't see why this answer was downvoted by someone. People who downvote really should leave a comment as to why. – tw16 Sep 05 '11 at 23:43
  • Thanks. Works great. Good stuff. – Patriotec Sep 06 '11 at 00:10
0

Hovering over a.wblinks is what causes the submenu to appear, correct? In that case, you just need to wrap everything (a.weblinks & the submenu, div.dropmenu) in a parent div, and bind the mouseleave event to that parent div.

This is a similar situation to the question I answered here.

Community
  • 1
  • 1
maxedison
  • 17,243
  • 14
  • 67
  • 114