Question

I have made a pure CSS dropdown menu for my client. The dropdown menu uses a background image behind the main menu items. In Firefox 3 and 4, the CSS menu does NOT have noticeable lag when it is by itself:

by itself

In Firefox 3 and 4, when the dropdown menu is placed within my client’s website, the hover effect on the menu items has a short lag, and the hover effect “follows” the cursor.

on website

What do I have to do to make the dropdown menu on the website perform as fast as when it is by itself?

Answer 1

This answer is isn’t a solution, just a suggestion (but too detailed for a comment)!
I can’t reproduce the issue, as I only have FF7 available, but just in case it’s related – your images are all too large.

The relevant example, pictures2/sandHeader.jpg – which forms the background-image of your #nav element – is a whopping 1024 x 768 when you’re only displaying a fraction of it. Whether that, in combination with the other CSS3 effects on your page, results in lag when using the menu, I can’t be sure. Try cropping it down to size and see if that makes a difference.

And while we’re on the subject, all your images are being downsized in the browser – it’d be far better for your bandwith and our loading times if they were only as large as they needed to be.

To see for yourself, right-click any one in FireFox and choose ‘View Image Info‘. It’ll tell you the actul size and what it’s being displayed as.