Superfish Child Drop Downs Falling Off Page

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?

Answer 1

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.

Answer 2

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 */ :)

Answer 3

I've solved this issue just doing this...

jQuery Superfish Menu Plugin - v1.7.4

just open Superfish.js and find the visibility change to display

example:

visibility: hidden to display : none

visibility: visible to display : block

superfish js edit file