[solved] remove final navigation separator in dropdown using border-right

have a dropdown menu using | as a separator with border-right. it looks like:

menuitem1 | menuitem2 | menuitem3 |

i can remove the final separator by using:
.menu li.last {border-right: none;}
however, this only works for a parent item with no children. when a menu item has children .last is applied to the last <li> under the parent.

is there a way to apply a class to the last parent <li> or another way to remove the final separator? i remember reading a post to that effect but for the life of me, i can’t locate it.

thanks, chas

Try get this into the tpl’s

Output - one item <li>:
Item
Output - many items <li>:
Item | Item | Item | Item | Item | Item | Item
Item | Item | Item | Item

The overflow:hidden might screw up the dropdown... But I think it’s safe because we don’t set height.

In that case try positioning a background image with the separator in the last or first class (see sharkbait reply below)!
http://modxcms.com/forums/index.php/topic,27650.msg167941.html#msg167941

however, this only works for a parent item with no children

...hope i understand you right

you probably need to create an InnerRow-Template in your Wayfinder call...like this:

create a chunk e.g. called "submenuRows" with the content:

now add &innerRowTpl=`submenuRows` to your wayfinder call and you should have the .last class added to your last menu-item in your nested UL

from the wayfinder e-book around page 39: http://modxcms.com/forums/index.php/topic,34176.0.html

hope i could help, j

thanks guys for the help.
played around with your ideas and finally stumbled on a simple solution. the problem was how to assign a style or id to the parentrow <li> so i could remove the right border (separator). in my case, the last parentrow <li> had children <li>’s and no style was assigned the parentrow <li> - .last is assigned by default to the last <li> in the group. with children, the last child <li> is assigned .last

my cssplay_parentRow chunk had no call for classes in the <li>:
<li ><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>....

so i added wf.classes to the <li> tag & the class appeared:
<li [+wf.classes+]><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a> .....

my css now worked:
.menu li.last {border-right: none;}

chas

Hi Guys

I want to do mine another way where is add a | to the end.
So i have done this:

<li [+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+] <span>|</span> </li>

now I can turn the ’span’ off in css --

BUT the problem is its not working? when i add teh markup <span> it doe not show up if i leave the words <span> out and simply add the | like this:
<li [+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+] | </li>

it works -- any idea?

am I not allowed mark-up? am I doing something wrong?

NEVER mind Fixed -- Was a CACHE problem, worked once I cleared CACHE