CSS drop down menu appears behind content

I have tried with z-index but doesn't seem to work...

HTML:

<div class="bar">
<ul>
<li><a href="http://ppeppd2013.plapiqui.edu.ar">Home</a></li>
<li style="width:78px;"><a href="#">Authors</a>
<ul><li><a href="http://ppeppd2013.plapiqui.edu.ar/author/submit.php">Make Submission</a></li><li><a href="http://ppeppd2013.plapiqui.edu.ar/author/edit.php">Edit Submission</a></li><li><a href="http://ppeppd2013.plapiqui.edu.ar/author/upload.php">Upload File</a></li><li><a href="http://ppeppd2013.plapiqui.edu.ar/author/paper.php">View File</a></li></ul>
</li>
</ul>
</div> 

Code (markup):

CSS:

.bar {width:900px; height:29px; margin:0; padding:0; float:right; background: url('images/barbg.gif') repeat-x left top;}
.bar ul{
	list-style: none;
	margin:0;
	padding:0;
}
.bar li{
	float: left;
} 
.bar li a{
	font-family: verdana,arial,helvetica,sans-serif; 
	font-size: 10pt;
	color: #ffffff;
	display: block;
	height: 13px;
	float: left;
	text-decoration:none;
	padding: 7px 13px 9px 13px;
	background: url('images/btnbg.gif') no-repeat right top;
}
.bar li a:hover, .bar li a.selected{
	background: url('images/btnbg_over.gif') no-repeat right top;
}
.bar li ul{
	display:none;
	padding:0px;
	margin:29px 0 0 0;
	width:140px;
	z-index:2000;
}
.bar li:hover ul{
	display:block;
}
.bar li li{
	display:block;
	width:140px;
	margin:0px;
	float:none;
}
.bar li li a{ 
	display: block; 
	height: 10px; 
	width: 123px; 
	float: left;
	padding: 5px 12px 8px 13px; 
	font-size:0.8em;
	background: #848484;
	border-bottom: 1px solid #5c5c5c;
}
.bar li li a:hover{	
background: #5c5c5c;
}

Code (markup):

Sample URL: http://ppeppd2013.plapiqui.edu.ar/commities.php

 

You have to have position: relative/absolute; to use z-index

Try adding

position: relative;

Code (markup):

to .bar li ul