<p>I'm using the following code to have a non-JS navigation:</p>

<pre><code>&lt;ol id="navigation"&gt;
    &lt;li id="home"&gt;&lt;a href="#"&gt;&lt;img src="./images/nav/home-hover.png" alt="Home" /&gt;&lt;/li&gt;
    ...
&lt;/ol&gt;
</code></pre>

<p>And the CSS:</p>

<pre><code>#navigation a {
    display: block;
    height: 25px;
}

#navigation a img {
    display: none;
}

#navigation a:hover img {
    display: block;
}

#home a {
    background: url('./images/nav/home-normal.png') no-repeat;
    width: 100px;
}
</code></pre>

<p>My problem is they won't change images on hover in IE6. I'm using the <code>:hover</code> on an anchor so that should be fine and am using <code>display</code> rather than <code>visibility</code> which is another thing that doesn't work in IE6.</p>

<p>I'd really like not having to add a load of javascript for image replacing/preloading (embedding something like jQuery isn't an option) - can anyone help me here?</p>

<p>Thanks,</p>

IE doesn't repaint anchors unless any rule on
```
<a>
```
itself changes. Add anything for
```
a:hover
```
, e.g.:
```
```
#navigation a:hover {border:0} /* no-op */
```
```
BTW: unfortunately popular screen readers don't read things with
```
display:none
```
, so your menu ends up being inaccessible.
I suggest having
```
<img>
```
visible by default, and hiding it on hover.