How to set a style on a sub-menu

[logan2z]

I'm trying to set a particular CSS style to limit the height of a sub-menu and set overflow properties. My submenu is very long and ends up extending past the limits of the browser window and is not scrollable. I've tried using className to do this but I don't seem to be able to get the className to apply only to the submenu - it seems like it is always applied to both the sub-menu and the menu item that triggers the sub-menu. I've tried the following configuration:

{
 ...
 items: {
   subMenu: {
       className: someClass,
       items: {
          ...
       }
   }
}

But this applies someClass to both the 'subMenu' element in the primary menu and the subMenu itself i.e. on both the li for "subMenu" and the ul containing all of the subMenu li elements. Is there a way to just have someClass applied to the subMenu?

[bbrala]

Wouldn't you be able to differentiate between those using ther context-menu-submenu class which is on the submenu LI element?

[logan2z]

You could do that, and that's what I'm doing, however that means writing CSS rules that are dependent on the internal DOM structure created by the plugin and it's probably best not to do that unless that structure is a documented part of the plugin's interface.

[bbrala]

That is a valid point. I can tell you it won't be changed lightly though. I'm also not against having the classes documented and setting in in stone officially.

Another option would be to not set the classes on the submenu's ofcourse, since that might be the expected behaviour, but that is a breaking change which i would not like to make lightly.

[logan2z]

Thanks for the reply. It sounds like the best option is to leave the current behavior for compatibility reasons and document the structure so that CSS rules can be written without fear of them breaking in future releases.