When a dropdown menu closes as you move the mouse down it, or its lower items can’t be clicked, something further down the page is sitting on top of the menu. It is usually a slider, a header image or a map. You fix it with CSS by giving the menu a higher z-index than the element covering it.

Find the element on top

1. Open the dropdown, right-click an item you can’t reach and choose Inspect.
2. If the inspector highlights a slider, map or other container instead of the menu item, that element is on top.
3. In the Styles panel, note its z-index, and check its parent elements too. Each positioned parent with a z-index creates its own stacking layer, so the number that matters may be on a parent.

Raise the menu

Add CSS at Appearance > Customize > Additional CSS, or in your child theme’s style.css. Replace the selector with your theme’s header or menu container:

.site-header {
	position: relative;
	z-index: 1001;
}

Use a number above the covering element’s z-index. If your theme has two menus, such as a top bar and a main menu, give the upper one the higher value, or its dropdowns will slide under the lower menu.

GeoDirectory maps

Maps that use OpenStreetMap are drawn with Leaflet, which gives its layers and controls z-index values up to 1000. A menu that drops down over one of these maps needs a z-index above 1000.

If the menu belongs to your theme, the theme’s support team can give you the exact selector to use.