therschbach Posted March 26, 2009 Share Posted March 26, 2009 I've been working on a drop-down menu for quite some time. I actually got one to work but I feel like I had to cheat a little. Now I'm working on another one that should be even simpler and I just can't figure it out. It seems way more complicated than it should be.I'm having onMouseOut & onMouseOver change the css property from hidden to visible and back again to reveal and hide the menus. A simple drop down is no problem, but I have what you might call "nested" drop-downs where once I hover over one drop-down, a sub-menu drops down next to it depending on what element I am hovering over.The problem is that when I use the alert command to let me know what is actually happening, everytime my mouse enters or leaves a <td> inside of my <table> which is inside of my <div>, it behaves like it's actually leaving the <div> and coming back to it, even though the mouse is still inside the table which is inside the div. So I'm wondering if this behavior is normal? Could someone please explain how onMouseOver & onMouseOut works with elements inside of a <div>? Why does it seem to leave and reenter the <div> everytime I mouse over an element inside the div? Might it have anything to do with absolute positioning? Link to comment Share on other sites More sharing options...
jeffman Posted March 26, 2009 Share Posted March 26, 2009 I suspect it has to do with event bubbling, which can get really confusing, and also has cross-browser issues.This may be one of the reasons for the popularity of CSS-based menus.Events happen, whether you're looking for them or not. So when you leave a table cell, a mouse-out event gets triggered. If the cell is listening for it, fine. If not, fine. But the event keeps bubbling up the DOM hierarchy (through the table cell's ancestors) until it hits the div's listener.At least I think that's what's happening.event.stopPropagation() might be useful here, but there may be a more obvious way. Link to comment Share on other sites More sharing options...
therschbach Posted March 26, 2009 Author Share Posted March 26, 2009 I think your reply confused me. This may be one of the reasons for the popularity of CSS-based menus.I thought I was using css-based menus? Maybe I don't know what constitues a css based menu... is there another way to do what I'm trying to do? Link to comment Share on other sites More sharing options...
jesh Posted March 26, 2009 Share Posted March 26, 2009 You're using javascript to modify the CSS. There are ways to do this without using javascript at all. This is what DD is talking about.Here's an example of a menu that uses only CSS:http://www.cssplay.co.uk/menus/dd_valid.html Link to comment Share on other sites More sharing options...
therschbach Posted March 26, 2009 Author Share Posted March 26, 2009 That's exactly what I'm trying to do. Thanks for the link! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.