Okay... A screenshot will be nice to illustrate the problem...

 

 

 

I am using the SimplejQueryDropdowns for it.

 

My ul menu level2 is appearing "under" my content, so how do I make it appear above my content?

 

 

CSS is here:

* 									{ margin: 0; padding: 0; }
#navigation							{ position:relative; width: 600px; top:137px; left:294px; font: 12px Verdana, Sans-Serif; }
#navigation a						{ text-decoration: none; } 
ul									{ list-style: none; }

/* 
LEVEL ONE
*/
ul.dropdown						 { position: relative; }
ul.dropdown li					  { font-weight: bold; float: left; zoom: 1; background: #caf378; }
ul.dropdown a:hover					{ color: #fff; }
ul.dropdown a:active				{ color: #ffa500; }
ul.dropdown li a					{ display: block; padding: 4px 10px; border-right: 0px solid #333;
 								  color: #222; }
ul.dropdown li:last-child a		 { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover				{ background: #F3D673; color: #fff; position: relative; }
ul.dropdown li.hover a			  { color: black; }


/* 
LEVEL TWO
*/
ul.dropdown ul 						{ width: 130px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; font-size: 10px; background: #eaf5d4; color: #000; 
								  border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li 					{ padding: 0px 0px; }
ul.dropdown ul li:hover 			{ font-weight: bold; }					  
								/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

ul.dropdown ul { width: 130px; visibility: hidden; position: absolute; top: 100%; left: 0;}

 

 

I'd imaging it's that line, change top: 100% to something like bottom: 30px;

No thats not what I want, I want my dropdown menu to appear above my purple bar.

 

I tried using z-index for my CSS but it didn;t work.

Well what happened when your tried that? Have you got an a live example, it was just a logical guessed based on the code i could see.

 

OH! i get what you mean now, sorry mybad. Z-index should fix it change.

 

Give ul.dropdown ul a z-index of say 99

 

and then give your purple bar a z-index of 1

 

Note you MUST use a positioning: attribute else z-index has no effect.

 

So try applying positioning:relative; and the z-index to those two elements

I had this issue a while back, and z-index solved it for me. i just set it really high to something like 30.

 

Also what part of your CSS did you apply the z-index to? you may have applied it to the wrong bit of CSS. Does this just happen in one web browser?