I was just dealing with the same issue. It looks like this "feature" fell off the road map :)
Anyways I found this Superfish Menu text off-screen
it solved it for me but YMMV as always.
Question
Superfish is a very common menu plugin, so I'm surprised I'm having difficutly rectifying this.
I have a pretty intense menu structure that involves several child menus. So much so, that a lot of them fall off of the page or out of the browser's view when their parent is hovered.
People have suggested applying a right: 0px;
property in place of the left: 0px;
property in the superfish.css
file, but it looks like the JS script is writing it's own CSS properties to the element as in-line styles. In fact, it actually looks like it's measuring the width of the parent menu in order to apply the correct left:
value.
The sub-menu's end up looking like this
<ul class="sub-menu" style="left: 16.18181818181818em;
float: none; width: 14.5em; display: block; visibility: visible;">
So, I guess what I'm getting at is... what applies these CSS properties if not the CSS file? Even when I apply a specific class for menus I want to 'drop-down' to the right instead of the left, the property gets overridden anyway.
Is there a way to rectify this, or just make it so once I get to the second level of drop downs (when drop downs start going to the left instead of below) they go to the right instead?
La solution
I was just dealing with the same issue. It looks like this "feature" fell off the road map :)
Anyways I found this Superfish Menu text off-screen
it solved it for me but YMMV as always.
Autres conseils
if CSS comes from Javascript,
then you may use !important
in your style sheet to over ride it.
Add a comment aside your rule in style sheet , so one may remenber or understand the use of
left:0!important;/* !important is here to overide style from js' suckerfish menu */
:)