0

I have a superfish menu on a custom theme I am working on...

I put it there a couple days ago, tested it with a few links, and it worked fine.

Now, when I hover a menu link, it no longer expands to show the items?

I haven't changed anything relating to the menus since it was last working, and I have gone through all possible mishaps I could think of - everything is failing me.

Here is my menu:

enter image description here

It is creating the menu looking OK, but its just that when I hover a link which should expand, it doesnt expand any longer.

Here is the menu it is creating:

<div id="menu-bar" class="nav clearfix">
    <nav id="block-superfish-1" class="block block-superfish contextual-links-region menu-wrapper menu-bar-wrapper clearfix" >  
        <h2 class="element-invisible block-title">Main menu</h2>

        <ul id="superfish-1" class="menu sf-menu sf-main-menu sf-horizontal sf-style-simple-centre-aligned sf-total-items-3 sf-parent-items-2 sf-single-items-1">
            <li id="menu-218-1" class="first odd sf-item-1 sf-depth-1 sf-no-children">
                <a href="/" class="sf-depth-1">Home</a>
            </li>
            <li id="menu-334-1" class="middle even sf-item-2 sf-depth-1 sf-total-children-1 sf-parent-children-0 sf-single-children-1 menuparent">
                <a href="http://www.google.com" title="" class="sf-depth-1 menuparent">Google</a>
                <ul>
                    <li id="menu-336-1" class="firstandlast odd sf-item-1 sf-depth-2 sf-no-children">
                        <a href="http://yahoo.com" title="" class="sf-depth-2">Yahoo</a>
                    </li>
                </ul>
            </li>
            <li id="menu-434-1" class="active-trail last odd sf-item-3 sf-depth-1 sf-total-children-1 sf-parent-children-0 sf-single-children-1 menuparent">
                <a href="/home" title="" class="sf-depth-1 menuparent active">Test 1</a>
                <ul>
                    <li id="menu-435-1" class="firstandlast odd sf-item-1 sf-depth-2 sf-no-children">
                        <a href="/home/#test" title="" class="sf-depth-2">Test 2</a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="contextual-links-wrapper">
            <ul class="contextual-links">
                <li class="superfish-list first">
                    <a href="/admin/structure/menu/manage/main-menu/list?destination=home">List links</a>
                </li>
                <li class="superfish-edit">
                    <a href="/admin/structure/menu/manage/main-menu/edit?destination=home">Edit menu</a>
                </li>
                <li class="block-configure last">
                    <a href="/admin/structure/block/manage/superfish/1/configure?destination=home">Configure block</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

And here is the menu on my page (I am hovering the google link):

enter image description here

I have tried changing the expanded options, both in the block options and the links on the menu. I have tried looking in firebug at the menu, and the which is not showing on the next level down has a class of "sf-hidden". If I stop it using its css style of "top: 9999em !important;", then the menu seems to work again. Technically, I could change the css within superfish to fix this... but I would rather not edit the module and instead figure out what is going wrong and what I should do to fix it.

Also, here is the custom CSS I have written which has anything relating to the menu at all:

#superfish-1, #superfish-2 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

#superfish-1 li a, #superfish-2 li a {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

#superfish-1 li li a, #superfish-2 li li a {
    padding-bottom: 0;
}

#block-superfish-1, #block-superfish-2 {
    text-align: center;
}

.sf-sub-indicator {
    background: rgba(0, 0, 0, 0) url("../../../libraries/superfish/images/arrows-777777.png") no-repeat scroll -10px -100px
}

a.sf-depth-2 {
    padding-top: 15px !important;
}

#menu-bar {
    margin-bottom: 20px;
}
  • Not really a Drupal problem. Check if there is a Javascript error in your console. – Gulok Sep 1 '15 at 4:04
  • Surely this is where you come if you have a problem with anything on your drupal site? I wasn't exactly saying this was a problem with drupal core or anything... It could be a problem with a conflict between two modules I have missed for example, etc. I have checked console by no errors. – pingu2k4 Sep 1 '15 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.