The main problem styling the parent and child elements differently and also getting the horizontal rules in between the bottom 2 menus.
That is indeed a question of CSS styling.
Normally Wayfinder will create nested unordered lists; so I assume the output looks like that:
<ul>
<li>home</li>
<li>about</li>
<li>blog</li>
<li>contact</li>
<li>work
<ul>
<li>PivotX</li>
<li>WordPress</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<li>archive
<ul>
.......
</ul>
</li>
</ul>
Then in the CSS you need a rule
ul li {
/* Styling of the first level items here */
}
and a rule
ul li ul li {
/* Styling of the second level items here */
}
To get the horizontal rulers I would use borders for the [tt]ul li[/tt] like
ul li {
.......
border-top: 1px solid grey;
}
But then you get them between the top items too.
To avoid this you could, instead, use an extra class:
ul li.haschildren {
border-top: 1px solid grey;
}
and use it in the parameter [tt]&parentClass=`haschildren`[/tt] .
Of course, for the items without children you need to keep the rule without border:
