I'm having some trouble with the text in my code interacting with the boxes. Here is a demonstration: http://jsfiddle.net/K6wy3/1/
The issue lies within this section of the code. The box hover effect works fine, but the text seems to flash and jitter when hovered over. Any suggestions on how to fix this?
Thank you in advance. CSS:
ul {list-style: none; font-family: Arial,Helvetica,sans-serif,serif; font-size: 12px; color: #000;}
a.exp {width: 145px; height: 34px; position: absolute; top: 0px; left: 0px; opacity:0.0; filter:alpha(opacity=0); z-index: 100;}
div.exp {display: none; position: absolute; top: 100px; left: 0px;}
a.exp:hover + div.exp {display: inline; z-index: 300;}
#wrap:hover > a.exp {display: inline; position: absolute; top: 0px; left: 0px; width: 787px; height: 450px; opacity:100.0; filter:alpha(opacity=100); z-index: 200;}
#wrap:hover > .exp {display: inline;}
img.allcategoriesBTN:hover {z-index: 0;}
.topHalf {
background-color: #222;
opacity:0.0;
filter:alpha(opacity=00);
}
.botHalf {
background-color: #555555;
}
.background {
position: absolute;
top: -2px;
left: -3px;
}
.backbox {
padding: 0;
margin: 0;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
width: 787px;
height: 34px;
color: #000;
float:left;
background-color: #999;
}
HTML:
<div id="wrap">
<a class="exp" href="#url" tabindex="1">
<TABLE class="background" width=100.5% height=100% cellpadding=0 cellspacing=0 border=0>
<TR>
<TD width=100.5% height=8% class="topHalf"> </TD>
</TR>
<TR>
<TD width=100.5% height=92% class="botHalf"> </TD>
</TR>
</TABLE>
</a>
<div class="exp">
<ul id="list">
<li><a href="http://www.google.co.uk/">Google</a>
<li><a href="musings.html">Musings</a>
<li><a href="town.html">My town</a>
<li><a href="links.html">Links</a>
</ul>
<img class="allcategoriesBTN" src="http://www.mediafire.com/convkey/2a45/702142qw7au3hdufg.jpg?size_id=2">
</div>
</div>