Flickering Layer When Using UL and Links...

Giganews Newsgroups
Subject: Flickering Layer When Using UL and Links...
Posted by:  adam.waterfie…@gmail.com (adam.waterfie…@gmail.com)
Date: Wed, 11 Jun 2008

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>/<ul> issue.

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>
";
}
?>
</ul>
</div>

Replies