Overlapping Dropdown Menu

[tceramesh]

Hi,
I am using auto suggest drop down menu..by using div tags and css.. below that i have navigation bar by using list items..
when i search in auto suggest the results are display behind the navigation bar...
what can i do....anyone help me ..

this is for auto suggest css

#auto li{padding:0; margin:0px 0px 0px 15px; border:0; list-style:none; position:absolute;}

and this for navigation section:
.groupItem .itemHeader
{
	line-height: 23px;
	background-color:#541C03;
	color: #000;
	padding: 0 0px;
	
	font-weight: bold;
	font-size: 16px;
	height: 23px;
	position: relative;
}

.groupItem .itemHeader a
{
	position: absolute;
	right: 30px;
	top: 0px;
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
}
.cross
{
	position: absolute;
	right: 10px;
	top: 0px;
	font-weight: bold;
	font-size: 11px;
	text-decoration: none;
	cursor:pointer;
}

[Dormilich]

I don't know, whether the problem is caused by this, but I recommend _always_ defining top/bottom, left/right properties when using position: absolute/relative (like the first two clauses).

[Markus]

Maybe giving the auto-suggest a z-index would help.

[tceramesh]

I don't know, whether the problem is caused by this, but I recommend _always_ defining top/bottom, left/right properties when using position: absolute/relative (like the first two clauses).

Hi,
i applied the properties that u mention... but still i am getting the same problem

[tceramesh]

Maybe giving the auto-suggest a z-index would help.

hi,
u told about z-index, where can i put that ...?? i don't know how to apply that..can u explain ( i saw in w3 schools but still i get confused )

[Dormilich]

hi,
u told about z-index, where can i put that ...?? i don't know how to apply that..can u explain ( i saw in w3 schools but still i get confused )

It's handled like any other property, e.g.
[CODE=css]#auto li {
/* your definitions here */
z-index: 20;
}

.groupitem {
/* your definitions here */
z-index: 10;
}[/CODE]
this should force the browser to draw li above/on top of .groupitem (due to the higher z-index).

Basicly z-index is something like stacking height and in the end you look from above to (more or less) overlapping elements having the ones with lower z-indices beneath the other ones.

note: you can even use z-indices in the range of 1000 an more, only question is, whether this is useful or not (there you have to make your own experiences)