Very Strange IE Menu Problem

[liunx]

Hi,
My meny works ok in FF and looks like this:
<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/menuprob1.JPG">http://www.sixfoottallrabbit.co.uk/menuprob1.JPG</a><!-- m -->
There I have rolled the cursor over the 5th, 4th and 3rd items and left it to rest on the 2nd item. When I hover over teh items I want the triforce symbol to appear like it does in Firefox.
But if I do the same thing in IE, it looks like this:
<!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/menuprob2.JPG">http://www.sixfoottallrabbit.co.uk/menuprob2.JPG</a><!-- m -->
See for yourself at <!-- m --><a class="postlink" href="http://www.sixfoottallrabbit.co.uk/hyrulefield/">http://www.sixfoottallrabbit.co.uk/hyrulefield/</a><!-- m -->
The items do not return the their original state.

Here is the HTML:
<ul class="menu">
<li class="menuhead">Main Site</li>
<li class="menuitem"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li class="menuitem"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 2</a></li>
<li class="menuitem"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
<li class="menuhead">Control Panel</li>
<li class="menuitem"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 1</a></li>
<li class="menuitem"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 2</a></li>
<li class="menuitem"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Item 3</a></li>
</ul>
Here is the CSS:
ul.menu {
width: 150px;
height: 100%;
padding: 0px;
margin: 0px;
background-color: #90CD8A;
list-style-type: none;
float: left;
}
li.menuhead {
width: 148px;
height: 18px;
padding-left: 2px;
padding-top: 2px;
background-color: #31522E;
color: #A9A941;
}
li.menuitem {
width: 150px;
height: 20px;
}
li.menuitem a:link, li.menuitem a:visited, li.menuitem a:active {
display: block;
height: 20px;
padding-left: 20px;
padding-top: 2px;
background-image: none;
color: #000;
text-decoration: none;
}
li.menuitem a:hover {
background-image: url("images/buttonover.jpg");
}
Please help. Thank you very very much.First try

li.menuitem a:link, li.menuitem a:visited {
display: block;
height: 20px;
padding-left: 20px;
padding-top: 2px;
background-image: none;
color: #000;
text-decoration: none;
}
li.menuitem a:hover {
background-image: url("images/buttonover.jpg");
}
li.menuitem a:active {
display: block;
height: 20px;
padding-left: 20px;
padding-top: 2px;
background-image: none;
color: #000;
text-decoration: none;
}

That puts the anchor styles in the required LoVe HAte order.Nah, still does it.
Thanks for trying. Also thanks for answering the other topic. Ok, then the next thing I'd try is refactoring the rules so the shared styles are only stated once and the pseudo-class styles just handle the differences.ummm... you know much more about this than I do. I don't even get what you mean. Please explain. THanks for helping."Refactoring" is like in math, ab + ac = a(b + c). Oh, before going on, try using background:none instead of background-image:none.Background: none; solved it
Thankyou, if you were female, I'd be in love with you by now.