Flickering Layer When Using UL and Links...

Question posted by: adam.waterfield@gmail.com (Guest) on June 27th, 2008 07:19 PM

I have a bit of a strange issue with a CSS styled unordered list
(contained within a <div>).

The layer is acting as a drop down when triggered by a JS onmouse
event of a link - this works fine.
However the layer has a unordered list containing links - when you
hover over the link, the layer flickers quickly. If you move your
mouse away from the UL area, it is fine, which indicated to me that it
is a <a>/<ulissue.

My code is below... does anyone have any idea why this is so?

TIA

JS Layer Trigger Code
====================

<script language="javascript" type="text/javascript">
function depMenuTog()
{
if(document.getElementById("depmenulayer").style.display=="none")
{
document.getElementById("depmenulayer").style.display="block";
}
else
{
document.getElementById("depmenulayer").style.display="none";
}
}
</script>

CSS For The Layer and List
====================
#depmenulayer ul
{
margin: 5px;
padding: 0;
}
#depmenulayer ul li
{
display: inline;
}

#depmenulayer li a
{
float: left;
text-decoration:none;
width: 13em;
}

Layer Code
====================

<div id="depmenulayer" onmouseout="javascript:depMenuTog()"
style="display: none">
<ul>
<?php
for ($i=1;$i<=sizeof($dep_menu_list);$i++)
{
echo "<li\"><a href=\"#\">".$dep_menu_list[$i]['name']."</a></li>\n";
}
?>
</ul>
</div>

Not the answer you were looking for? Post your question . . .
184,185 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).