Forum Moderators: not2easy
As my deadline approaches and I'm desperate building an efficient CSS Rollover menu I post my question in this forum. Hoping for soon replies.
The situation:
I have a vertical menu with 8 items. Each menu-item has its own unique (background) image and there's no text in the menu. I'm trying to build a CSS rollover menu, in which the user see each menu-item change (highlighted) when he mouses over.
The problem:
I've tried 2 different approaches to build such a rollover menu. One way or another way, neither methods seems to work for me, although they work in the examples from which I copied the HTML en CSS codes.
1. In the first method I use a DIV for each menu-item. The DIV contains a <a href> tag with an image. When there is a mouse-over, the background of the DIV changes. In FireFox this works just fine, however in Internet Explorer (IE) the rollover images flicker.
I've searched the web for a solution and copied the code, however for unique background-images this doesn't work...
2. In the 2nd method I use <ul> and <li> to build the menu. The <ul> uses a CSS class with a background image. This image contains the complete menu as well as the complete rollover menu. (normal state and hover state). As soon as the user mouses over a <li> item, the background of that list-item changes. (The position of the background image changes to the right, which should show the hover part of the image). The problem is that I can't get this menu working. The background doesn't seem to change. The Firefox view is terrible, the positioning doesn't work at all.
This method is explained here: [dellwebsites.com...]
[snip]
Please have a look at this situation, as I can't come up with a solution...
Thanks in advance,
Mathijs de Jong
[snip]
[edit: no urls, please. See CSS Forum Charter [webmasterworld.com] for details.]
[edited by: createErrorMsg at 10:37 am (utc) on June 28, 2005]
[edit reason] url fixing [/edit]
IF after you do so, and you still have problems, post some of your code in here as per the charter for this area. There are directions for how to do this correctly.
Its a bit difficult to help you out if you dont' let us see the styles and your code.
Good luck.