I have a menu that is setup as a block and have the 'Show as expanded" selected in the parent menu items. Also in the block config, the setting for number of levels to display is unlimited.

When a sub menu item or page is displayed, the menu does not appear expanded. There is only one item in the top level with 6 items in level 2. The menu always appears collapsed unless you click on the top level menu items. The menu items are rendered fine and I'm not looking to have the menu expand on hover.

I saw related issues but they appear to be about adding onhover support (not what I'm looking for) or support for many nested levels. This is a basic 3 level menu.

If I switch to Bartik, the menu appears expanded as expected.

Any suggestions - is this a bug or a support issue?

Comments

blainelang created an issue. See original summary.

blainelang’s picture

blainelang commented

The submenu expands if I add the open class to the top level menu item li element.

Yaazkal’s picture

Yaazkal commented
Related issues: +#2903656: Updating to Drupal core 8.4.0-beta1 results in not working dropdown menu

Hi, I think this has been solved at issue #2903656

Try the patch.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (duplicate)
learnbydrop’s picture

learnbydrop commented

Add this custom JS in the theme js file, it will resolve the issue.
Review the code implemented in http://www.stayinpg.in

jQuery('.dropdown-toggle').mouseover(
function() {
jQuery('.dropdown-menu' ).css( "display","block" );
}
);
jQuery('.dropdown-menu').mouseover(
function() {
jQuery('.dropdown-menu' ).css( "display","block" );
}
);
jQuery('.dropdown-toggle').mouseout(
function() {
jQuery('.dropdown-menu' ).css( "display","none" );
}
);

konrad_u’s picture

konrad_u commented

might be also related to:
Bootstrap theme for Drupal 8 shows the first level items only, so you have to tell the theme you need more levels.
You need to head over to Block Layout -> configure Main Navigation block -> under Menu Levels change 'Number of levels to display' to unlimited for instance. This worked for me

amr.abou-elenin’s picture

amr.abou-elenin
Primary language Arabic
commented

@konrad_u it worked exactly as you said. Thanks

gabriel.nunez’s picture

gabriel.nunez commented

I've tried with the block and menu configurations with no success. I opted for the jQuery approach by #5, but it triggers all dropdown menus in the page at hover. So I fiddled a little and came out with this.

(function($) {
Drupal.behaviors.dropdown = {
attach: function(context, settings) {

$('.expanded.dropdown').mouseover(function() {
$(this).find(".dropdown-menu").css( "display","block" );
});

$('.dropdown-menu').mouseover(function() {
$(this).css( "display","block" );
});

$('.expanded.dropdown').mouseout(function() {
$(this).find(".dropdown-menu").css( "display","none" );
});
}
}
}(jQuery));

tryitonce’s picture

tryitonce commented

D7/Nexus theme ...... transfering a site from localhost to a production site some submenus didn't show up/fold out.
Turns out that the production site had jQuery 1.10 activated - setting it back to 1.07 solved my problem - ..../admin/config/development/jquery_update.
Added later ....
Well not quiet, I have set jQuery now to 1.08 and further down jQuery and jQuery UI CDN to jQuery.
I also activated Superfish module. I did not activate the Superfish block, but I configuered it.
With this I got the menu going in Chrome.

mkarthi1947’s picture

mkarthi1947 commented

Check below two steps it may be useful
Step 1:
Go Block Layout -> configure Main Navigation block -> under Menu Levels change 'Number of levels to display' to unlimited for instance.
Step 2:
Add below Javascript into your code

 var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        if(!isMobile) {
        	jQuery('ul.nav li.dropdown').hover(function() {
			  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
			}, function() {
			  jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
			});
        }
no74h’s picture

no74h
Him
Primary language English
Location Orbit
commented

I confirm this. You may have to change menu levels setting on block Layout page, as mentioned by #6 and #10.
This is weird, since on a menu's item edit page (structure -> menu -> main -> an item), there is no mention of this. It would be great to have a short mention on the 'Show as expanded' checkbox's description.