Dead on. I added a padding-bottom: 10px to the #nav ul li element to bridge the gap and that seems to have fixed it. Thanks again!
Jeffrey Kretz wrote: > > > Here's what I believe is happening. > > You have an LI that is a certain height, about 21px. > > This LI is inside a div that is larger, 36px. > > The floating DIVs are positioned underneath the larger DIV. > > ------- > MENU DIV > > -------- > LI > -------- > > <- Empty space > > ------ > Floating Div > > There is an empty space between the LI and its child DIV. > So when you move the mouse there, it is no longer inside the > LI or its children, and it fires the mouseleave event. > > You could set the height of the LI to expand to the size of the menu DIV. > > JK > > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of serpicolugnut > Sent: Monday, December 01, 2008 4:52 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Using jquery to construct menus like nbc.com > > > > I used your mouseenter and mouseleave function, but I'm still having > issues > with the menus disappearing when the user mouses off the top level item, > and > in to the lower level list items (containing the div menus). > > Here's a link to a more fleshed out example: > > http://dl.getdropbox.com/u/21984/menu_test_case/menu_test_case.html > > Any clues on why it's inconsistent in it's sticky-ness? > > Thanks - > Ted > > > Jeffrey Kretz wrote: >> >> >> I made a few changes and reposted it here: >> >> http://test1.scorpiondesign.com/LocalTest7.htm >> >> Changes: >> >> menu1 through menu5 were moved underneath their respective LIs. When the >> menus were NOT children of the LIs, the mouseenter mouseleave kept >> firing. >> >> #nav { position:relative; } >> This allows the absolute positioning of child elements relative to >> itself. >> >> #menu1, #menu2, #menu3, #menu4, #menu5 { >> display:none; >> left: 0px; >> >> Rather than hiding the menus with javascript, I set the CSS to display >> none. >> The first toggle called will turn them on. The left:0px aligns the menus >> with the first relatively positioned element, in this case #nav. >> >> $("li.main-nav").bind("mouseenter mouseleave", function(){ >> $(this).children('div').toggle(); >> return false; >> }); >> >> So it's a class based selector (less code), and it only binds the parent >> element (rather than the parent and child). >> >> Cheers, >> JK >> >> >> -----Original Message----- >> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On >> Behalf Of serpicolugnut >> Sent: Tuesday, November 25, 2008 11:04 AM >> To: jquery-en@googlegroups.com >> Subject: [jQuery] Re: Using jquery to construct menus like nbc.com >> >> >> >> Here's a link to a simplified version of the code. The >> mouseenter/mouseleave >> events helped, but I'm seeing some strangeness on the first menu item, >> and >> then some flickering on the others. >> >> http://dl.getdropbox.com/u/21984/menu_test.html >> >> >> Jeffrey Kretz wrote: >>> >>> >>> If you have a sample url of your code, that would be helpful. >>> >>> But at a guess, the flyout div is probably not a child of the main menu >>> element, so the mouseenter and mouseleave won't work properly. If this >>> is >>> the case, it will require a minor change to the hover plumbing. >>> >>> The z-index with flash in IE6/7 can usually be solved by doing two >>> things: >>> >>> 1. Add the wmode="transparent" attribute to the flash movie. >>> 2. Wrap the tag in a div set for the same width and height, with >>> its z-index set for 0. >>> >>> JK >>> >>> -----Original Message----- >>> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On >>> Behalf Of serpicolugnut >>> Sent: Tuesday, November 25, 2008 7:08 AM >>> To: jquery-en@googlegroups.com >>> Subject: [jQuery] Using jquery to construct menus like nbc.com >>> >>> >>> >>> I'm trying to utilize jquery to construct a menu structure that is >>> similar to what you see at fox.com and nbc.com. Basically I have a >>> menu that is a ul list, with each li selector given it's own id. Below >>> I have a div container for each menu item, which are set to be hidden >>> by jquery upon load. >>> >>> I've been the mousever/mouseout actions to trigger turning each div >>> container on/off, but the problems I'm encountering with this are 1) >>> it works when hovering over the main menu selection, but not when the >>> mouse is inside the div, making selecting sub items difficult/ >>> impossible, and 2) for some reason in IE6/IE7, the divs don't show >>> when they are over a Flash object. >>> >>> Does anybody have any ideas on how to take items #1 and #2? >>> -- >>> View this message in context: >>> >> > http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp2068217 >>> 1s27240p20682171.html >>> Sent from the jQuery General Discussion mailing list archive at >>> Nabble.com. >>> >>> >>> >>> >> >> -- >> View this message in context: >> > http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp2068217 >> 1s27240p20687612.html >> Sent from the jQuery General Discussion mailing list archive at >> Nabble.com. >> >> >> >> > -- > View this message in context: > http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp2068217 > 1s27240p20783951.html > Sent from the jQuery General Discussion mailing list archive at > Nabble.com. > > > > -- View this message in context: http://www.nabble.com/Using-jquery-to-construct-menus-like-nbc.com-tp20682171s27240p20792185.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
