I want to thank you all for making such useful observations and suggestions. I’m definitely making headway, although I’m not quite out of the woods yet.
As Lucas remarked, I pulled the ’ul’ out of my CSS, and bingo, I was able to grab and realign all of the items in my menu. I’m glad that this worked, however it remains a bit counterintuitive to me that I would have to remove the ’ul’ in order to grab the entire menu: after all, even the top level items in the menu are within the main ’ul’ tags.
<div id="menu">
<ul id="topnav"><li class="first level1 active"><a href="http://mysite.com/" title="Home" >Home</a></li>
<li class="level1"><a href="index.php?id=2" title="Practice Areas" >Practice Areas</a><ul id="topnav"><li class="first level2"><a href="index.php?id=3" title="Monitoring Unobservable Behavior" >Monitoring Unobservable Behavior</a><ul id="topnav"><li class="first level3"><a href="index.php?id=4" title="Hidden Populations" >Hidden Populations</a></li>
<li class="level3"><a href="index.php?id=7" title="Prescription Drug Abuse" >Prescription Drug Abuse</a></li>
<li class="level3"><a href="index.php?id=8" title="Intelligence Gathering" >Intelligence Gathering</a></li>
<li class="last level3"><a href="index.php?id=9" title="Custom Applications" >Custom Applications</a></li>
</ul></li>
<li class="last level2"><a href="index.php?id=5" title="Managing Organizational Change" >Managing Organizational Change</a><ul id="topnav"><li class="first level3"><a href="index.php?id=10" title="Strategic Planning" >Strategic Planning</a></li>
<li class="level3"><a href="index.php?id=11" title="Performance Management" >Performance Management</a></li>
<li class="last level3"><a href="index.php?id=12" title="Custom Applications" >Custom Applications</a></li>
</ul></li>
</ul></li>
<li class="level1"><a href="index.php?id=6" title="Principles" >Principles</a></li>
<li class="last level1"><a href="index.php?id=13" title="Contact" >Contact</a></li>
</ul>
</div>
I also followed Susan’s suggestion and removed the [[+wf.classes]] placeholder from my Outer template. As the HTML output displays, Wayfinder still often adds multiple classes (’first’, ’active’, etc.) to the output by default, and I’m not sure if this is somehow interfering with my attempts to control the list items by referencing them based on their level. Here is my current (and very stripped down) Outer template, as well as my Wayfinder call:
<ul id="topnav">[[+wf.wrapper]]</ul>
[[!Wayfinder? &startId=`0` &outerTpl=`outer` &levelClass=`level` &hereClass=`here` &cssTpl=`menucss`]]
Finally, as mentioned in my initial posting, I can’t seem to get the ’&hereClass’ to work properly. I certainly hope this is not a bug as Lucas suggested, since I absolutely need to assign a unique style to the currently active document. Here is my CSS. Please note that none of the ’here’ class attributes get represented in the output at all at this point:
#topnav {
display: block;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px;
text-indent: 0%;
list-style-type: none;
}
a.level1:link {font-size: 13px; line-height: 26px; color: #000000; text-decoration: none; list-style-type:square;}
a.level1:hover {font-size: 13px; line-height: 26px; color: #CD3700; text-decoration: none; margin-left: 4px; list-style-type:square;}
a.level2:link {font-size: 13px; line-height: 20px; color: #000000; text-decoration: none; list-style-type:square; margin-left: 8px; }
a.level2:hover {font-size: 13px; line-height: 20px; color: #CD3700; text-decoration: none; margin-left: 12px; list-style-type:square;}
a.level3:link {font-size: 13px; line-height: 16px; color: #000000; text-decoration: none; margin-left: 16px; list-style-type:square;}
a.level3:hover {font-size: 13px; line-height: 16px; color: #CD3700; text-decoration: none; margin-left: 20px; list-style-type:square;}
a.here:link:{color: red}
No doubt, a lot (if not all) of these problems have roots in CSS. Any additional suggestions would be greatly appreciated. Thanks so much.
☆ A M B ☆
