CSS : problème z-index...

Bonjour,
J'ai un petit problème : je suis entrain de créer une combo box en CSS, Javascript et HTML mais voila que si je met plusieurs de ces combo box, que j'en ouvre une, l'autre se met a bouger... comment éviter sa ?
JAVASCRIPT :
lastco = '';
function combo(id) {
var nme = 'cp' + id;
if(document.getElementById(nme).style.display != 'block') {
if(lastco != '') {
document.getElementById(lastco).style.display = 'none';
}
document.getElementById(nme).style.display = 'block';
lastco = nme;
} else {
document.getElementById(nme).style.display = 'none';
lastco = '';
}
}
function ccheck(id) {
if(document.getElementById(id).checked == true) {
document.getElementById(id).checked = false;
} else {
document.getElementById(id).checked = true;
}
}
HTML :
<ul class="cccul"> <!-- container des différents combo -->
<li class="ccc">
<dl class="combo"> <!-- un combo box -->
<dt onclick="combo('0')">Objet</dt> <!-- le titre -->
<dd>
<ul id="cp0"> <!-- la liste -->
<li onclick="ccheck(cm-m0)"><input type="checkbox" name="cm-m" id="cm-m0" value="MRQ1"/> MRQ1</li> <!-- un item -->
</ul>
</dd>
</dl>
</li>
CSS :
.cccul { /* container des combos */
margin: 0px;
padding: 0px;
border-top: 1px solid orange;
width: 300px;
}
.ccc { /* un item combo */
float: left;
list-style: none;
margin: 0px;
margin-right: 5px;
margin-top: 5px;
padding: 0px;
margin-bottom: 0px;
width: 130px;
}
.combo input[type=checkbox] { /* une case a cocher */
vertical-align: middle;
}
.combo dt:active { /* le bouton pour afficher la liste appuyer */
background-image: url(combo2.png);
}
.combo dt { /* le bouton pour afficher la liste */
position: relative;
display: block;
height: 20px;
width: 128px;
background-image: url(combo.png);
padding-left: 2px;
cursor: pointer;
}
.combo dd { /* le container de la liste */
position: relative;
z-index: 80;
font-size: 85%;
max-height: 400px;
margin: 0px;
margin-top: 2px;
padding: 0px;
border: 1px solid #ababab;
width: auto;
background-color: #e5e5e5;
border-bottom: none;
overflow: auto;
}
.combo dd ul { /* la liste */
position: relative;
z-index: 80;
display: none;
}
.combo dd * { /* tous ce qui a dans le container de la liste */
margin: 0px;
padding: 0px;
list-style: none;
}
.combo dd li { /* un item de la liste combo */
display: block;
height: 20px;
cursor: pointer;
border-bottom: 1px solid #ababab;
padding-left: 2px;
}
.combo dd li:hover { /* un item de la liste ou l'on passe la souris dessus */
background-color: orange;
}
Voila !
Merci d'avance !