I like using nested lists positioned by percentages, but in trying to make them work for a dropdown menu, I'm not succeeding in getting the child lists to stay visible when the mouse moves from the parent list item to the block-displayed child list. I'm also having trouble getting the lists to display on top of images in IE, despite setting z-indices on the various elements. Do I need to unnest the lists and make the parent items spans or divs or something? Or am I missing something else (probably obvious)?
Thanks very much for your help. <ul id="TopicATop" onmouseover="$('topicA').show(); return false;" onmouseout="$('topicA').hide(); return false;" ><li>Topic A<br /> <ul id="TopicA" > <li><a href="#" class="lvl3">menu item</a></li> <li><a href="#" class="lvl3">menu item</a></li> <li><a href="#" class="lvl3">menu item</a></li> </ul></li></ul> I have the css set up like this (omitting the positioning for the lists, which is "absolute" relative to the containing div): #menu ul, #menu ul li {font-family:Papyrus, Parisian BT, Palatino Linotype, Times New Roman; color:White; font-size:15px; font-weight:bold; margin:0; text-align:left; display:block; list-style:none; cursor:pointer; } #menu ul li ul {padding-top:6px; } #menu ul li ul, #menu ul li ul li, .lvl3 {display:block; list-style:none; color:White; background-color:#5d4550; width:100%; font-family:Papyrus, Parisian BT, Palatino Linotype, Times New Roman; font-size:15px; cursor:pointer; } a.lvl3:link {cursor:pointer; color:White; background-color:#5d4550; text-decoration:none;} etc... -- You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptacul...@googlegroups.com. To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.