Top Level Menu Items Separator

[jmradMember]

Hi

I need to draw a separator line between the top level menu items. For instance, if you go to the Demo section of this website, you select the jqxMenu and then Default Functionality, in that same demo menu I need to show a dark grey line between Home, Solutions, Products, Support, Communities and Company. How do I do that? The regular

doesn’t work on the top level menu items.

Julz

[jmradMember]

In the post above I meant that the regular clause for drawing a separator doesn’t work on top level menu items:

<li type='separator'></li>

[MariyaParticipant]

Hi jmrad,

Try by adding an additional style as shown:

  <style type="text/css">
        .jqx-menu-item-top {
            border-right:solid grey;
      }
    </style>

Best Wishes,
Mariya

jQWidgets Team
http://www.jqwidgets.com

[jmradMember]

Thanks Mariya, your suggestion helped. However I had to tune it as follows:

/*applied to the menu's li elements.*/
.jqx-menu li, .jqx-menu-dropdown li
{
    line-height: 1.3 !important;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
/*applied to the menu's li elements.*/
.jqx-menu li
{
    border-right: 1px solid black;
}

But now the last menu item has a “separator” on the right. I will try to use some JavaScript to remove it.

[jmradMember]

I found a way to remove the separator from the last top level menu item by adding this CSS bit:

.jqx-menu li:last-child
{
    border-right: 0;
}

[Author]

Posts