I have a CSS menu at the following website:

Kennedy's Mica: Hardware and DIY equipment direct from Rubery, West Midlands

For some reason, the menu isn't rendered correctly, and it appears to be a problem which only occurs when a hover is set up on the .menuitem class.

Any ideas?

Note: On this page, the menu should be as expected in the CSS. For some reason, the hover style forces the div to shrink.

You've got some very bizarre behavior with that menu in IE, I think it's dropping the float.

On FF, all I see is 1 piece of the menu image on the first item.

Are you using PHP on that page ? If not, take this out from the top of your page:
<?xml version="1.0" encoding="ISO-8859-1" ?>

That will throw IE into quirks mode.

Make your menu an unordered list.

When you use the pseudo classes, they must be in a specific order, or problems occur:
Link, Visited, Hover, Active - just remember LoVeHAte

Your .menubox is specifed at 160px.. BUT, your HOVER image is 250px wide.. that's causing the float drop in IE,
your menubox needs to be as wide as your image.

If you put the menu in a list, you can better control the spacing and the image background.

I don't know how to do it as a list - you couldn't fire any tips my way could you?

So I understand that I have to add the properties for a class on the <ul> tag, but is there anything else I have to do?

Have a look at the code and CSS on this site (one of mine):
Southern Kentucky Urology - Adult and Pediatric Urology Care

Simple list menu, I use it all the time, not difficult to implement.

You might also want to read this tutorial: Listutorial: Step by step CSS list tutorial

OK, so I've made some changes to have the menu in the form of a list. Is there any chance you'd please be able to have a look and tell me what's wrong with it? Just to point me in the right direction?

Sure. Try it this way:

CSS:

#menubox{
width: 160px;
float: right;
margin-right: 45px;
margin-top: 20px;
display: inline; /* defeats another IE bug, the double-margin bug */
}

#menubox ul {
list-style-type: none;
margin: 0 0 5px 0;
padding: 0;

}

#menubox ul li{
width: 160px;
margin-bottom: 5px;
font-weight: bold;
font-size: 110%; - adjust to fit to what looks good to you.
color: white;
}


#menubox li a{
background: url('images/menubutton.gif') no-repeat;
display: block;
height: 1%; /* these 2 lines kill an IE bug */
vertical-align: bottom;
text-decoration: none;
padding: 10px 0 18px 19px; /*this padding adds the space to display your button image */
color: white;
}

#menubox li a:hover {
background: url('images/menubutton_h.gif') no-repeat;
color: red;
}

Then your html should be like this:

<ul>
<li><a href="#">» Home</a></li>
<li><a href="#">» Products</a></li>
<li><a href="#">» Special Offers</a></li>
<li><a href="#">» Newsletter</a></li>
<li><a href="#">» Contact</a></li>
</ul>

So how does the HTML for that particular list reference the IDs in the CSS?

Aah - scrap that last comment. I get it now, thanks I'll try that now!

Looks like it's working

The answer is specificity.. #menubox ul targets only the ul in that box and so on.

That's fantastic - thanks for all your help.

Based on my plans, the design is pretty much finished. Any suggestions on how to improve it, though?

I think it'll be fine once you get the rest of the site fleshed out. I presume you'll have some graphics in there, that will help.

Yeah, of course. Thanks for all your help - I'll let you know when it's all finished if you'd like?

Sure, I'd love to see it