Flicker On Dropdown Menu, On First Hover. Doesn't Happen Afterwards

[newbornultra]

Hello,

I have a dropdown menu, which has a strange flicker effect when you first hover over it. If you hover over it afterwards then the effect doesn't happen. It seems to occur in Chrome and IE.

 

#nav1
{
padding:0px;
list-style-type:none;
}


#nav1 li
{
float:left;
width:156px;
height:auto;
}


#nav1 li a
{
display:table-cell;
width:143px;
background-image:url(../images/hcp-main.jpg);
height:105px;
color:#ffffff;
font-size:16px;
vertical-align:middle;
text-align:center;
font-weight:bold;
text-decoration:none;
}


#nav1 li a:hover
{
background-image:url(../images/hcp-hover.jpg);
}


#nav1 li ul
{
padding:0px;
list-style-type:none;
}


#nav1 li ul li a
{
font-size:12px;
font-weight:normal;
display:table-cell;
vertical-align:middle;
text-align:left;
padding-left:7px;
width:129px;
padding-right:7px;
}


#nav1 li ul li.crohns
{
height:29px;
width:143px;
}


#nav1 li ul li.ra
{
height:29px;
width:143px;
}


#nav1 li ul li.ps
{
height:42px;
width:143px;
}


#nav1 li ul li a.crohns
{
margin:0px;
background-image:url(../images/crohns-a.jpg);
height:29px;
width:129px;
}


#nav1 li ul li a.crohns:hover
{
margin:0px;
background-image:url(../images/crohns-ahover.jpg);
height:29px;
width:129px;
}


#nav1 li ul li a.ra
{
margin:0px;
background-image:url(../images/ra-a.jpg);
height:29px;
width:129px;
}


#nav1 li ul li a.ra:hover
{
margin:0px;
background-image:url(../images/ra-ahover.jpg);
height:29px;
width:129px;
}


#nav1 li ul li a.ps
{
margin:0px;
background-image:url(../images/ps-a.jpg);
height:42px;
width:129px;
}


#nav1 li ul li a.ps:hover
{
margin:0px;
background-image:url(../images/ps-ahover.jpg);
height:42px;
width:129px;
}

 

<ul id="nav1">
   <li><a href="#">Patient</a>
    <ul>
	 <li class="crohns"><a class="crohns" href="index.html">Crohn's Disease</a></li>
	 <li class="ra"><a class="ra" href="index.html">Rheumatoid Arthritis</a></li>
	 <li class="ps"><a class="ps" href="index.html">Psoriasis / <br />
	  Psoriatic Arthritis</a></li>
    </ul>
   </li>
   <li><a href="index.html">Healthcare Professional</a></li>
  </ul>

 

Any ideas what's causing it? Background images are jpg's so it isn't a PNG issue

 

Thanks,

[RobertP]

could be the image is not cached, so each time you hover, it loads the image the first time, but it doesn't load the image for the other times.