Separator between links in vertical navigation menu

Can we see a link to your website to see the exact menu? I think this can be done by CSS.

Sure. I haven’t finished work on this yet, so the styles aren’t as pretty as they’re going to be, and links and category names are appearing now where they won’t later, but here it is:

https://pranalana.com/wordpress/about

And here’s what I want it to look like:

https://pranalana.com/area51/inside.html

Ok.

The site you gave for reference used a manual made menu in the left. It is not auto-generated by wordpress if you understand what I mean. In your situation, the menu is generated by wordpress using te UL and LI tag elements.

For using a vertical separator you can only use solid, dotted, etc.. lines of various colors and widths attached as a CSS rule to your top-border of the LI element.

Well, that’s too bad. I tried dotted lines as a bottom border, and neither I nor my client liked them. Thank you for the help, though. Back to the drawing board . . .

You can use the same solution as that other site but this would mean to edit a widget with the button links. But for your client if he has no html experience at all will be hard to add new pages.

Yeah, that’s the line I’m trying to walk. I’ve looked a couple of solutions that involve my recoding a widget, but my client wants as much control as possible, so this might be one part of the appearance we have to sacrifice.

In theory, you could add those single dots as images to each list item in the sidebar using CSS. I’d say it’s eminently do-able.

How? I am really interested in this.
Are you referring to the list-style-image css rule applyed to the LI?

Wouldn’t this show in front of the LI element?

That would only happen if you used list-style-image. What I’m suggesting is a background image that is applied to each li element using something like:

#nav-box .widget li {
background-image:ur;(images/dot.gif) no-repeat center bottom;
padding-bottom:20px;}

This assumes something like a 14 x 14px dot.gif image. You might need to tweak the bottom padding and perhaps add some top margins to the li elements to get the right spacing but that’s pretty much it in a nutshell.

This solution actually occurred to me right after I signed off. I’m going to give this a try. Will let you know the results. Thanks esmi!

yes, this is great. i didn’t thought of this.

No problem. Glad I could offer a possible solution.

Esmi’s idea totally worked. Here’s the css:

#nav ul li {
	padding-bottom: 25px;
	background: url(images/bullet.jpg) bottom center;
	background-repeat: no-repeat;
}

#nav ul li:last-child {
	background-image: none;
	padding-bottom: 0px;
}

You can see the results in action here:

https://pranalana.com/wordpress/about

The :last-child pseudoclass doesn’t work in IE, but I think there’s a javascript solution for that, which I will be looking into when I’m not about to fall asleep. Thanks for your help, everyone