View Full Version : strange happenings with CSS UL Menu

07-07-2005, 05:54 AM

Im attemting to create a top navigational drop down menu using CSS.. I have been following the AList Apart tutorial


The file im working on is located here:
The part in question is the Top Navigational menu, specifically "our products" and "skincare for you" drop downs..

the CSS file here:

The menu works fine in firefox & netscape.. however in IE on the first rollover after page load the box/border around the items is cut off and I have tried extensively to work out why to no avail.. On the mac platform using safari or IE there are some major positioning errors..

This is the problem I have on XP with IE 6.. Borders cut off...

any thoughts would be greatly appreciated...

07-07-2005, 01:51 PM
Something is overlapping something that IE doesn't like.

topNav ul {z-index:1}

Try the code above, it should make your menu appear on top of everything else.

07-07-2005, 03:45 PM
thanks for your help but that didnt solve the problem.. In dreamweaver I set the z index for the menu layer at the top of everything else before with no change of effect in IE. also tried the code you suggest:

topNav ul {z-index:1}

but it should be this yeah? ..with the #?

#topNav ul {z-index:1;} and does this set the z-index to 1? isnt that at the bottom? I also tried to set it to 1000:

#topNav ul {z-index:1000;} still no action..

One strange thing is that this only occurs on the first rollover of each menu item, after this first rollover the rest of the interactions produce the desired effect... any ideas on why this is happening would really help.. im having lots of problems finding a workaround to this problem... :confused:

thanks for your help..