How to Overcome Submenus Blocked by Image Slider
Illustration: drupal.org

POST how to overcome blocked, closed, or “squeezed” menus, submenus, or dropdown menus. Image Slider, Flash, or Featured Post This slideshow was inspired by a blogger’s question that was not answered by the blogger admin who commented on.

The question is this: “I have tried and succeeded (creating a featured post slider on the blog’s homepage), but the submenu is getting blocked. How do I fix it?”

There was no answer, maybe the admin was really busy or didn’t have time to read the comments.

Slideshow closed dropdown menu usually happens when we install the slider ourselves, not the default template used.

Overcome Slider Blocked Menu Navigation (Dropdown Menu Behind Slideshow)

After “peeking” or studying several blog templates whose normal Slider or Featured Post Slideshows do not block submenus/dropmenus, it is confirmed that the cause is a css problem, namely the z-index property.

On the forum Stack Over Flow, the solution is also to add a z-index, i.e. z-index: 999 in the CSS Menu that is blocked/overlapped with the Slider. For example, #menu {z-index:9999;}

Here’s an example of a complete CSS Menu so it doesn’t get blocked by the Slider:

#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
z-index:9999;
}

#nav ul li {
width:100px;
float:left;
z-index:9999;
border-top:1px solid #fff;
}

According to expert programmers, z-index is a CSS property whose function is to set the front or back position of an element.

That’s How to Overcome Submenus Blocked by Image Slider. Good luck and hope you don’t run into it. Good Luck!

Do you have the most accurate solution? Please share and leave a comment!

.