CODEWITHSUNDEEP
javascriptcss
iCeR
iCeR

Reputation: 71

IE issue with menu hover

Site: http://bit.ly/Pa3xJS

Using IE (9 or lower), when hovering over any menu on the homepage and trying to select items 2+, ie: hover over Shop and try click Brushes or Haircare, the menu disappears.

I suspect this is due to my slidecontent, however everything I have tried (CSS hacks and JS changes) doesn't let the menu work as it should and does on FF, Chrome & Safari.

Is there a specific IE fix for this or a CSS hack that I've missed?

Edit: I've updated Justus' CSS fiddle to include the slidecontent without the irrelevant bits of code - http://jsfiddle.net/eN7sh/14/. Feel free to play with that, just looking for what the issue is on IE.. mainly IE9.

Upvotes: 0

Views: 207

Answers (2)

Anuj
Anuj

Reputation: 306

i checked your site on ie 8.its working fine ..

just one thing you should do

apply

z-index property on sub menu item.

Upvotes: 0

Justus Romijn
Justus Romijn

Reputation: 16019

Your website has a lot of other code, so it's hard to see what really is causing the issue. I have fiddled a css-only 3-level menu a while ago: http://jsfiddle.net/eN7sh/12/

I'm pretty sure it will work if you can match the css/html, although li:hover might not work on IE7. You can just use javascript to add a classname on the hover event and work with that, if you must. Fiddle code: HTML: 

<ul class="main">
  <li ><a href="#">Link one</a></li>
  <li><a href="#">Link two</a>
    <ul>
      <li><a href="#">Sublink one</a></li>
      <li><a href="#">sublink two</a>
        <ul>
          <li><a href="#">Sub sublink one</a></li>
          <li><a href="#">Sub sublink two</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS: 

ul.main {
}
.main li {
    float: left;
    position: relative;
}
.main ul {
    position: absolute;
    display: none;
    left: 0;
    top: 1em;
}
.main li:hover > ul {
    display: block;
}
.main ul li {
    display: block;
    float: none;
    white-space:nowrap;
}
.main ul ul {
    left:100%;
    top: 0;
​}​

Upvotes: 1

Related Questions