a écrit :
>
> <STYLE TYPE="TEXT/CSS">
> <!--
>
> .menu {display:none; margin-left:20px}
>
> -->
> </STYLE>
>
Except if each main menu links to a page with its own sub-menus,
you can't do this way because without JS : no sub-menu
Usualy to bend and deploy sub-menus blocks you use lists
<ul id="menu">
<li><a href="1.htm">menu 1</a>
<ul>
<li><a href="11.htm">sub-menu 1.1</a></li>
<li><a href="12.htm">sub-menu 1.2</a></li>
<li><a href="12.htm">sub-menu 1.3</a></li>
</ul>
</li>
<li><a href="2.htm">menu 2</a>
<ul>
<li><a href="21.htm">sub-menu 2.1</a></li>
<li><a href="22.htm">sub-menu 2.2</a></li>
<li><a href="22.htm">sub-menu 2.3</a></li>
</ul>
</li>
<li><a href="3.htm">menu 3</a></li>
</ul>
CSS :
=====
#menu li ul { display: block; }
#menu li.hide ul { display: none; }
JS :
====
onload = function() { if(document.getElementById) {
var M = document.getElementById('menu');
var L = M.getElementsByTagName('LI');
for(var i=0; i<L.length; i++) {
if(L[i].getElementsByTagName('UL') &&
L[i].getElementsByTagName('UL').length>0)
{
L[i].className = 'hid';
L[i].onclick = function() {
this.className = this.className==''? 'hid' : '';
return false; }
}
}
}
}
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date