[Theme: Pachyderm] Drop down menu not working properly on IE

I’m not able to reproduce this in IE 9 — the submenus are accessible, stay open, and are not hidden behind the post content. Are you using the most recent version of the theme?

I can confirm this problem on IE8 with the latest version of the theme. The drop down menus are working fine with Firefox, in IE the drop down menu sometimes disappears quickly as described by archampion.

It seems to stay open if you move the cursor very fast down: the problem ssems to be the white space between the menu item and the entries of the drop down menu. if the cursor is over this white space for too long, the drop down menu will close again.

We can help your website work in IE8, but do understand that IE compatibility beyond version 9 is too much to ask from a free theme vendor. Create/ continue your own thread for support.

I just made a test with IE9. Same problem in IE9 and the latest version of the theme.

Where is your website?

https://www.gutzumessen.de

May I ask whether you have a section of the dashboard named, “Custom CSS” or “Jetpack”? Or are you using a Child Theme?

I am not using any of these plugins and I am also not using a child theme

May you download and install this Custom CSS Manager plugin? It holds your CSS modifications so it is separate from the theme but still applies to it; meaning you can update your theme and your CSS modifications won’t be erased.

You can resolve this in either two ways; move the submenu upwards (closer to the actual menu) or extend the hyperlink so it has a higher height (without making it look different). Which way would you prefer?

I just installed this plugin.

I would prefer the second solution, extending the hyperlink.

In the Custom CSS section of the dashboard, enter this;

.navigation-main li a,
.navigation-main li:hover > a {
 background: none;
 display: block;
}

.navigation-main li:hover {
 background: #ed7b7b;
}

.navigation-main li a {
 color: white;
 margin: 0 3px;
 padding: 3px 5px;
 display: block;
 height: 27px;
 font-size: 12px;
 font-size: 1.2rem;
 text-decoration: none;
 text-transform: uppercase;
}

.navigation-main li {
 background: #f15d5d;
 display: block;
 height: 25px;
}

.navigation-main li li {
 margin: 3px 0;
}

.navigation-main li li a {
 padding: 3px 5px;
 margin: 0;
 height: auto;
}

Uh-oh, that’s not going to work for your long-worded submenu links.

I added the code the custom CCS.

It seems to fix the issue but it also seems to limit the height of each submenu-entry to one line. A few of my submenu-entries are too long for one line and now are now longer visible, e.g. the first one “Home” -> “Funktion dieser Seite”. The word “Seite” is no longer visible.

Try replacing that code with this;

.navigation-main .menu > li,
.navigation-main .menu > ul li {
 height: 25px;
}

.navigation-main li a,
.navigation-main li:hover > a {
 background: none;
 display: block;
}

.navigation-main li:hover {
 background: #ed7b7b;
}

.navigation-main li a {
 height: 27px;
}

.navigation-main li {
 background: #f15d5d;
}

.navigation-main li li {
 margin: 3px 0;
}

.navigation-main li li a {
 padding: 3px 5px;
 margin: 0;
 height: auto;
}

Edit: Updated to work on this demo site.
Edit: Code re-factored.

updated with the new code

looks fine in IE9