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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
