CODEWITHSUNDEEP
cssinternet-explorermenuhoverhtml-lists
jchwebdev
jchwebdev

Reputation: 5460

IE hover doesn't work without background?

I'm having an IE (8 and up) css problem with a pretty typical list-based drop down menu generated in Wordpress. This is not a javascript issue.

If someone could please look here: http://jchmusic.com

Click on the 'MORE' link at right. The drop down sub menu appears. So far, so good.

But in IE, when one moves the mouse off the 'MORE' to the drop down (which is a ul) the drop down can't be reached. In Chrome, FF, Safari it works fine.

However, if I add a background color to the ul which encompasses the drop down then the hover 'works' fine.

Any suggested workaround?

<li id="menu-item-3570" class="menu-item menu-item-type-custom menu-item-object-custom     current-menu-item current_page_item menu-item-home">
  <a href="http://jchmusic.com/#more">More…</a>
  <ul class="sub-menu">
    <li id="menu-item-1835" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://jchmusic.com/downloads/">Downloads</a>
    </li>
    <li id="menu-item-1873" class="menu-item menu-item-type-post_type menu-item-object-page">
    <li id="menu-item-1849" class="menu-item menu-item-type-post_type menu-item-object-page">
    <li id="menu-item-2025" class="menu-item menu-item-type-post_type menu-item-object-page">
    <li id="menu-item-3585" class="menu-item menu-item-type-post_type menu-item-object-page">
  </ul>
</li>

Upvotes: 0

Views: 786

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Elements with a transparent background are also "transparent" to mouse events in IE.

You can fix this by using an "almost-but-not-quite-transparent" background (rgba(0,0,0,0.01)), but this'll only work in recent versions. The alternative is to just have a solid-colour background.

Upvotes: 2

Related Questions