Arf... On s'est mal compris.
Le cumul de listes est inutile (sans compter qu'il est incorrect : tu n'as pas de dl pour encadrer tes dt et dd).
Ce qui compte, c'est avant tout de mettre un balisage adapté à ton contenu; ce n'est ni la mise en page ni le comportement à obtenir qui doivent t'influencer.
Bref, je te laisse un exemple complet (par manque de temps) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple</title>
<script type="text/javascript"><!--
(function() {
// AJOUT DE LA CLASSE HASJS A L'ELEMENT HTML
document.documentElement.className += ' hasJS';
// GESTION DES EVENEMENTS
var evt = {
// AJOUT D'UN GESTIONNAIRE D'EVENEMENT
connect: function(oEl, sEvType, fn, bCapture) {
return document.addEventListener ?
oEl.addEventListener(sEvType, fn, bCapture || false):
oEl.attachEvent ?
oEl.attachEvent('on' + sEvType, fn):
false;
},
// ANNULATION DE LA PROPAGATION DE L'EVENEMENT ET DE L'ACTION PAR DEFAUT DE LA CIBLE
stop: function(e) {
if(e && e.stopPropagation && e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
else if(e && window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
return false;
}
};
// GESTION DES CLASSES CSS
var css = {
remove: function(oEl, sClass) {
var rep = oEl.className.match(' ' + sClass) ? ' ' + sClass : sClass;
oEl.className = oEl.className.replace(rep, '');
},
add: function(oEl, sClass) {
if(!css.has(oEl, sClass)) oEl.className += oEl.className ? ' ' + sClass : sClass;
},
has: function(oEl, sClass) {
return new RegExp('\\b' + sClass + '\\b').test(oEl.className);
}
};
// SCRIPT DU MENU
var menu = {
label: 'menu',
// REINITIALISATION DU MENU
init: function(aEls, oEl) {
if(!aEls || !oEl) return;
var iEl = aEls.length;
while(iEl-- > 0) {
if(aEls[iEl] == oEl) continue;
css.remove(aEls[iEl], 'current');
}
},
// SELECTION DES SOUS-MENUS
selectSsMenus: function() {
var aUls = document.getElementsByTagName('ul');
var iUl = aUls.length;
var aLis;
while(iUl-- > 0)
if(css.has(aUls[iUl], menu.label))
aLis = aUls[iUl].getElementsByTagName('li');
return aLis;
},
// AJOUT DES GESTIONNAIRES D'EVENEMENTS SUR LES LIENS DE CHAQUE ITEM DE LISTE
addBehaviour: function(aEls) {
if(!aEls) return;
var iEl = aEls.length;
var oA;
while(iEl-- > 0) {
oA = aEls[iEl].getElementsByTagName('a')[0];
if(!oA) continue;
evt.connect(oA, 'click', (function(oEl) {
return function(e) {
menu.init(menu.selectSsMenus(), oEl);
css[css.has(oEl, 'current') ? 'remove' : 'add'](oEl, 'current');
return oEl.getElementsByTagName('ul')[0] ? evt.stop(e) : true;
}
})(aEls[iEl]));
}
}
};
// CHARGEMENT DU SCRIPT
evt.connect(window, 'load', function() {
var aSsMenus = menu.selectSsMenus();
menu.addBehaviour(aSsMenus);
});
})();
//--></script>
<style type="text/css"><!--
@media screen, projection {
.menu,
.menu ul {margin:0; padding:0;}
.menu li {list-style-type:none;}
.menu a {display:block; width:9em; line-height:1.3em; padding:3px 5px; background:#66d; color:white; text-decoration:none;}
.menu a:hover,
.menu a:focus,
.menu a:active,
.menu .current a {background:#463;}
.menu ul a,
.menu .current ul a {background:#439;}
.menu ul a:hover,
.menu ul a:focus,
.menu ul a:active {background:#943;}
.hasJS .menu ul {display:none;}
.hasJS .menu .current ul {display:block;}
}
--></style>
</head>
<body>
<ul class="menu">
<li class="current">
<a href="section1.html">menu 1</a>
<ul>
<li><a href="lien11.html">lien 1.1</a></li>
<li><a href="lien12.html">lien 1.2</a></li>
<li><a href="lien13.html">lien 1.3</a></li>
</ul>
</li>
<li>
<a href="section2.html">menu 2</a>
<ul>
<li><a href="lien21.html">lien 2.1</a></li>
<li><a href="lien22.html">lien 2.2</a></li>
<li><a href="lien23.html">lien 2.3</a></li>
</ul>
</li>
</ul>
</body>
</html>
- côté JS, tu n'as rien à faire,
- côté CSS, il faut adapter ce que j'ai fait à tes besoins,
- et côté structure, il faut respecter la même syntaxe sachant que si tu mets une classe "current" comme dans cet exemple, le sous-menu sera ouvert au chargement.
En surplus, il y a la technique du hasJS.
PS: Tu peux mettre le JS et le CSS dans des fichiers externes.
Modifié par koala64 (25 Jun 2008 - 19:30)
)