I'm making this wordpress theme, and I need to create a menu that is vertical but its submenus are horizontal, like this:

 SubmenuItem | SubmenuItem 
 SubmenuItem | SubmenuItem

Now using wp_nav_menu() and CSS I can get this effect, but I don't have any idea on how to add the pipe symbol to separate the submenu items.

            'after'=> ' | ',

is no good as it will turn out as

MenuItem |
 SubmenuItem | SubmenuItem |

(adding a | after every item, which is the documented behavior) I was wondering if there was a way to selectively add the pipe symbol so that it is added only between the submenuitems and not after anything else. According to WP documentation, there doesn't seem to be a built-in method to support this.

So what is the best way to accomplish this effect (without editing wp core code)?

1 Answer 1


This is another case where a pure-CSS definition will work. For example:

#main_nav_left li:after {
    content: ' | ';
#main_nav_left li:last-child:after {
    content: '';
  • Thanks, I never knew CSS could edit content. How cross-browser-friendly is this though?
    – jabbany
    Jul 25, 2011 at 4:26
  • Browser support is actually pretty good for the :before and :after pseudo-elements. Jul 25, 2011 at 11:01
  • I see, I'm using it now and it works like a charm!
    – jabbany
    Jul 30, 2011 at 18:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.