You might have noticed that the Shailan Dropdown Menu Widget does not display the dropdown menus properly in older versions of Internet Explorer. The dropdowns actually show behind the other content on the page.
Here is how you can fix it.
Start By Using the Blue Gradient Theme/Skin
To start we recommend trying the fix with the Blue Gradient theme/skin for the menu – once you see how it works here you can easily fix it wherever you need. To select this skin, go to the Drop Down Menu section (under Settings) in your admin panel. Select the Blue Gradient Skin at the top, and click Save changes.
Now you have to modify that skin’s css file
Use your favorite ftp tool (fileZilla, coda, cPanel for hosting, fetch, ssh + vi, etc) to go the plugin’s directory on your server/hosting. The location will be your_domain/your_wordpress_install/wp-content/plugins/dropdown-menu-widget/themes.
Now edit the simple-blue.css file.
You just need to change one line (about the 8th line of the file):
- Change the line from this:
- ul.dropdown{ padding:0px 0px 0px 20px;}
- To this:
- ul.dropdown{ padding:0px 0px 0px 20px; z-index: 9999;}
(you’ve just added the text “z-index: 9999;”)
Save your file. (Make sure you are saving back to the server/hosting)
That’s it!
If you are using a different skin than Blue Gradient, you will just have to make this change the your skin’s corresponding css file. Blue gradient uses simple-blue.css, you can easily figure out what the others use.
View Comments (4)
Not all the css files can be changed, some of them I could not even find. But that is maybe because I am not familiar with the coding.
I got my solution by putting the z-index in the sgailan dropdown css itself:
mysite/mywordpress-install/wp-content/plugins/dropdown-menu-widget/css
At the top I put it like this:
/* Remove list styling */
ul.dropdown, ul.dropdown li, ul.dropdown ul { list-style: none; margin: 0; padding: 0;z-index: 9999; }
and after that it worked with the style "none".
Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!
I made the code change you suggest above to the Blue Gradient skin, which I am already using. Saved to server, but no success. My new code is pasted below, an is the URL so you can see the results.
Any other suggestions?? I sure would like to make these drop downs visible since they contain much of the most interesting content.
http://www.easykidsrecipes.info/
.dropdown-horizontal-container{ background:url(images/blue-gradient/menu_bg.png) top right no-repeat; height:40px; margin-right:-15px; }
ul.dropdown{ padding:0px 0px 0px 20px; z-index: 9999;}
ul.dropdown-align-right{ padding: 0px 20px 0px 0px; }
The above solutions didn't work for me.
The thing that did work was defining de div where the menu is placed with z-index 9999; and the div where the content is placed a z-index:0;