0

For some reason, sub-menus do not work on all pages on my site. Here is one (basic page) that shows the submenus

submenu works

and here is a screenshot where it doesn't even though the mouse is hovering over the Home menu item.

no submenu

The links are enabled in Main Menu and I tried toggling "Show as expanded" on and off but neither one makes a difference. The background image is hidden by a display:none css style in the second image/page. If I go to the Contact page, which looks similar to the first image the submenu does not show up on there either. The Contact page was created using the webform module.

Any help figuring this out would be much appreciated.

Thanks,

Kamal

UPDATE: I noticed that on the pages where the submenu works, the following code is generated for the menu.

<ul class=" eh-hmenu "><li class="first last expanded active-trail active"><a class="active-trail" href="/">Home</a><ul class="menu eh-hmenu-right-to-left active"><li class="first last leaf active-trail active"><a class="active-trail active" href="/host">Host A 51@EarthHour Event</a></li>

Whereas on the pages where it doesn't work, I only see

<ul class=" eh-hmenu "><li class="first last collapsed active"><a class="active" href="/">Home</a></li>

1

Which page are you on when it does not show and is that page in the menu? Also Are you using a block for the menu or printing it in the theme template file? That could be the cause. I'd recommend switching to a block if that's the case and make sure the expanded check-box is checked.

  • Hi, the menu is added via block and show as expanded checkbox does not seem to make a difference. The second screenshot is from a panel page that is also the <front> page, so that would make it the 'Home' page as well, which is what the HOME links to. – Kamal Jun 18 '14 at 4:47
  • try the nice menus module if it's not a css error. – SDMulroy Jun 18 '14 at 10:28
  • thanks. the nice menus module didn't work. I updated the question with something else I discovered. – Kamal Jun 18 '14 at 15:29
  • I made a silly mistake. I was only checking the "Show as expanded" for the links that were not working instead of all of them. Thanks again for taking the time to answer. Thanks to Japo as well. – Kamal Jun 18 '14 at 21:15
1

Are you sure that you have the menu set to appear on all pages, including the subpages and not just the parent pages?

  • I just saw your reply. There was mistake I had made with the menu. I put the reply under SDMulroy's answer. – Kamal Jun 18 '14 at 21:41
1

Have you tried the Nice Menus module?

Nice Menus enables drop-down/right/left expandable menus. It uses only CSS for most browsers, with minimal Javascript for IE6. (Version 2 uses the Superfish jQuery plugin for all browsers, with an option to disable JS, and falls back to CSS-only for browsers that can handle it.)


Though it just might be a CSS error. if your submenu is position: absolute, check if its container is position:relative.

Also, if you added a z-index style in your css, it needs either position:relative or position: absolute to work properly.

  • Thanks Japo. Nice Menus didn't work and when I went looking for the CSS properties I discovered that on the pages where it doesn't work, the submenu items are not even showing up in the source code. I updated my original question with sample code of what it looks like. – Kamal Jun 18 '14 at 15:30
  • Try configuring the block then having a Menu depth of -1 to display all children. I also usually have "Respect "Show as expanded" option" set to No – Japo Domingo Jun 18 '14 at 23:16
0

You would do the following:

Ensure that all the menu items in their settings have checked "showed as expanded".

In the CSS for the menu (as from ignoredbydinosaurs.com's example), ensured that your menu ul styling is in principle like the following:

ul {
  float: left;
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  float: left;
  list-style: none;
  list-style-image: none; /* DRUPAL!! */
  padding: .5em 1em;
  margin: 0;
}
ul li ul {
  display: none;
  position: absolute;
  width: 10em;
  left: 0;
  top: 1em;
}
ul li:hover ul {
  display: block;
}

The display:none; position:absolute and position:relative; are what are at work here. and You will notice that this is from their example. Ensure that the CSS document is properly linked to your page and I believe that this will work.

here is a tutorial that helps with menus in drupal: http://www.ignoredbydinosaurs.com/2014/02/building-a-drop-down-menu-from-scratch . Also there was a discussion that addressed many of these problems where I also responded: https://www.drupal.org/documentation/modules/menu#comment-9014221. I responded to a problem in this discussion relating to dropdown menus.

  • 2
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – 4life Jul 31 '14 at 15:19
  • Hey thanks @4life for your suggestion. I updated my answer. – Winnifred Sep 30 '14 at 20:13

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.