Horizontal tabulator menu for two levels

The CSS code is placed in the HTML file which can be reached by click on the download icon.

The DTML code generates a nested list by calling the function filteredChildNodes() a second time for the "active case". The render result is structured as follows:

<div id="Menu">
  <ul id="channelNav">
    <li>L1 A ...</li>
    <li class="active">L1 B ...
      <ul id="channelSubnav">
        <li>L2 a ...</li>
        <li>L2 b ...</li>
        <li>L2 c ...</li>
      </ul>
    </li>
    <li>L1 C ...</li>
  </ul>
</div>

DTML

<!--  pageelement_Menu -->
<div>
<ul id="Menu">
<dtml-in "content.filteredChildNodes(REQUEST,PAGES)"><dtml-unless 
  "isResource(REQUEST)"><dtml-let 
   active="id in REQUEST['thisObj'].absolute_url().split('/')">
 <li<dtml-if active> class="active"</dtml-if>><a 
    href="<dtml-var "getHref2IndexHtml(REQUEST)">" 
    title="<dtml-var "getTitle(REQUEST)" 
    html_quote>"><dtml-var "getTitlealt(REQUEST)" html_quote></a></li>
<dtml-if active>
  <ul id="Submenu">
<dtml-in "filteredChildNodes(REQUEST,PAGES)"><dtml-unless 
  "isResource(REQUEST)"><dtml-let 
   active="id in REQUEST['thisObj'].absolute_url().split('/')">
    <li><a 
    <dtml-if active>class="active"</dtml-if> 
     href="<dtml-var "getHref2IndexHtml(REQUEST)">"
     title="<dtml-var "getTitle(REQUEST)" 
     html_quote>"><dtml-var "getTitlealt(REQUEST)" html_quote></a></li>
</dtml-let></dtml-unless></dtml-in>
  </ul>
</dtml-if>
</dtml-let></dtml-unless></dtml-in>
</ul>
</div>
</div>
<!-- /pageelement_Menu -->