Drop down menu hidden by slideshow
Permalink 2 users found helpful
Hi
I have got a CSS drop down menu in the header part of my site. Directly underneath the menu i have added the built in slideshow from Concrete5's core blocks.
The problem i am having now is that when i hover my mouse over the drop down menu it drops behind the slideshow. I know the drop down still works as it shows the menu options from the drop down above and below the slideshow, it's just the menu options that fall inline with the slideshow that are hidden.
Hope this makes sense.
Thank you in advance for any help.
I have got a CSS drop down menu in the header part of my site. Directly underneath the menu i have added the built in slideshow from Concrete5's core blocks.
The problem i am having now is that when i hover my mouse over the drop down menu it drops behind the slideshow. I know the drop down still works as it shows the menu options from the drop down above and below the slideshow, it's just the menu options that fall inline with the slideshow that are hidden.
Hope this makes sense.
Thank you in advance for any help.
Thanks Nathan.
The menu was part of a container div. I added the z-index (to the container) and noticed that i hadn't set the position to relative. Once i did all that it worked.
Thanks for your help.
The menu was part of a container div. I added the z-index (to the container) and noticed that i hadn't set the position to relative. Once i did all that it worked.
Thanks for your help.
Glad I could help.
Thanks Nathan. This was the answer to my problem. Set my header's z-index to 10 and everything else fell into place.
this is a common css issue, you need to raise the z-index of your drop down menu.
As I can't see your css I can't give you the exact fix, however if you are able to find the styles for your drop down menu you need to add a high z-index value to the parent element. The reason for this is that the slide show (I assume) uses absolute positioning and therefore is no longer contained within the document flow, rather it is positioned above other elements in the document.
Find the parent element in the css i.e. #main-nav or what ever it's ID is, then add z-index:1000;
this should do it but if not increase the z-index, this should fix your issue.
Cheers.