javascrpt＋スタイルシートでメニューを作る

スタイルシートtips 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
         "http://www.w3.org/TR/REC-html40/strict.dtd">
 <html>
   <meta HTTP-EQUIV="content-type" CONTENT="text/html;charset=EUC-JP">
   <meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
   <head>
     <title>木構造表示</title>
     <!-- javaスクリプト -->
     <script Language="JavaScript">
     <!--
       function toggle(id){
         var targetElement;
         targetElement = document.getElementById(id);
         if(targetElement.className == &#39;visible&#39;){
           targetElement.className = &#39;invisible&#39;;
         }else{
           targetElement.className = &#39;visible&#39;;
         }
       }
     //-->
     </script>
     <!-- スタイルシート -->
     <style type="text/css">
     <!--
       .visible {display:;}
       .invisible {display:none;}
       span {color:blue;text-decoration:underline;}
     -->
     </style>
   </head>
   <body>
     <ul>
       <li><span onclick=&#39;toggle("c1");&#39;>第１章</span></li>
       <ul id=c1 class="invisible">
         <li>第１条</li>
         <li><span onclick=&#39;toggle("c1s2");&#39;>第２条</span></li>
         <ul id=c1s2  class="invisible">
           <li>第１号</li>
           <li>第２号</li>
         </ul>
         <li>第３条</li>
 　    </ul>
       <li><span onclick=&#39;toggle("c2");&#39;>第２章</span></li>
       <ul id=c2 class="invisible">
         <li><span onclick=&#39;toggle("c2s1");&#39;>第１条</span></li>
         <ul id=c2s1  class="invisible">
           <li>第１号</li>
           <li>第２号</li>
           <li>第３号</li>
         </ul>
         <li>第２条</li>
         <li>第３条</li>
 　    </ul>
    </ul>