3 Level Menu In Wayfinder

I’m trying to create a 3 level combination dropdown/dropline line the one at http://www.cssplay.co.uk/menus/pro_dropline_dropdown.html.

I’m struggling to understand the various Wayfinder parameters. So far, this is my markup:

<div class="pro_linedrop">
<ul class="select">
<li>
<a href="#"><b>Home</b></a>
</li>
<li class="line">
<a href="#"><b>Products</b></a>
<ul class="sub">
<li class="subline"><a href="#nogo">Cameras</a>
<ul>
<li><a href="#nogo">Nikon</a></li>
<li><a href="#nogo">Minolta</a></li>
<li><a href="#nogo">Pentax</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

And my Wayfinder snippet call is:

[[Wayfinder? &startId=`0` &level=`3` &outerClass=`select` &rowTpl=`1` &parentRowHereTpl=`2` &innerTpl=`3` &innerHereTpl=`4`]]

And my chunks:

{{1}}
<li>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><b>[+wf.linktext+]</b></a>
[+wf.wrapper+]
</li>

{{2}}
<li class="line">
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><b>[+wf.linktext+]</b></a>
[+wf.wrapper+]
</li>

{{3}}
<ul class="sub">
[+wf.wrapper+]
</ul>

{{4}}
<li class="subline">
<a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
[+wf.wrapper+]
</li>

Can anyone see what I’m doing wrong or provide me with an explanation of what I need to do. I can’t seem to get the last class="subline" to be injected.

Thanks in advance!

Droplines always seem to give some trouble in wayfinder since they need an extra state that WF does not cover natively. There have been a few discussions on this but I do not remember what the outcome was. Off the top of my head I would venture that you may need to use an embedded wayfinder call or do some fancy CSS or something like that. It will need some thinking outside the box to make it work...but it CAN be done.