Hiding and Showing a list
Hi there,
I am making a navigation UI along the lines of "son of suckerfish"
from htmldog.com.
Basically I have a list in which each 'li' element is styled as a box
with a border. When I mouseover one of the 'li' elements, another list
appears by the side of it.
If I start with the sublist visible, I can make it appear and
disappear by mouseover and mouseout of the 1st level 'lil' element
using the following code:
$("#home_life").bind('mouseover', function(event){showChildren();})
.bind('mouseout', function(event){hideChildren
();});
function showChildren() {
$("#home_life ~ ul").show("fast");
}
function hideChildren() {
$("#home_life ~ ul").hide("fast");
}
However, I really want the sublist to be invisible when I start. When
I either change the css for the sublist to display:none, or
visibility:hidden. Then the sublist does not display, but also will
not appear on mouseover. I have also tried using:
$("#nav ul li").hide();
in the initialisation function, which again hides the sublist, but
again the list won't appear ion mouseover.
Can anybody tell what I'm doing wrong?
Many thanks
Joe Lemmer