View Full Version : layer over drop down menu...is it possible ?

02-02-2005, 10:13 PM
I have seen this problem on many sites and I have faced it in some sites I built. When trying to place a <div> layer over a drop down menu, the menu always shows up through it. I noticed that some sites use a trick to solve this problem by hiding the drop down menu when a layer is displayed...but this is not really neat...any ideas??

evil kev
02-02-2005, 10:22 PM
i'm not 100% sure what you mean without seeing an example but i think use of the css z-index attribute could be the solution to your problem.

if you are unfamiliar a brief summary is that the object with the highest z-index value is displayed on top of items with lower z-index values

02-04-2005, 09:32 PM
well I know obviously...that's how it SHOULD be but try out the following:

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<div id="lay1" style="position:absolute; z-index:10;">
<form name="form1" method="post" action="">
<select name="select">
<option>menu item 1</option>
<option>menu item 2</option>
<option>menu item 3</option>
<div id="lay2" style="position:absolute; z-index:100; background-color:#990000; width:200px; height:200px">

in IE, the drop down menu always shows up in front...whatever the z-indexs !! ...in mozilla it actually works.

see the attached pic...or simply try it out urself

thanks anyways ;)

02-05-2005, 02:17 AM
As noted by this article (http://www.blooberry.com/indexdot/css/properties/position/zindex.htm) IE renders select elements over top of any element positions in the same spot.

They mention a fix for IE 5.5+ using iframes, if thats any use to you.