Submenus do not work on some pages

Question

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

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

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>

Answer 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.

Answer 2

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

Answer 3

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.

Answer 4

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.