DropDown Menus // pure-menu-separator : Vertical separator instead of a horizontal one

[grfrm99]

If you add a menu separator in the drop down menu demo (http://purecss.io/menus/ ) than you get a vertical line instead of a horizontal line. See below:

Tested with "http://yui.yahooapis.com/pure/0.6.0/pure-min.css"

[redonkulus]

@grfrm99 what markup are you using to create the separator?

[grfrm99]

I took the Dropdowns sample in the Pure menu page and added this markup:
<li class="pure-menu-separator"></li> under the "Twitter" menu item

You can see the result here: https://jsfiddle.net/y27ymf8z/

[redonkulus]

@grfrm99 thanks for the fiddle, it looks like the separator has to be reset due to the horizontal style setting. Try this out and let me know if that works:

.pure-menu-horizontal .pure-menu-children .pure-menu-separator {
    display: block;
    width: auto;
    height: 1px;
    margin: .3em 0;
}

[grfrm99]

It works perfectly.
Thanks.