2

Hi i have a simple css hover menu on my page but it does not seem to work on IE10 when using a touch device.

Is there any solution to this problem?

Sample: http://jsfiddle.net/Z8Q8T/

Html:

<ul class="Menu">
  <li>
    <a href="javascript:void(0);">First</a>
    <ul>
      <li>
        <a href="#1" class="Active">1</a>
      </li>
      <li>
        <a href="#2">2</a>
      </li>
      <li>
        <a href="#3">3</a>
      </li>
      <li>
        <a href="#4">4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0);">Second</a>
    <ul>
      <li>
        <a href="#5">5</a>
      </li>
      <li>
        <a href="#6">6</a>
      </li>
      <li>
        <a href="#7">7</a>
      </li>
      <li>
        <a href="#8">8</a>
      </li>
    </ul>
  </li>
</ul>

CSS:

.Menu, .Menu ul {
    list-style: none;
    display: block;
    margin: 0;
}
.Menu > li {
    float: left;
    padding-bottom: 1px;
    margin: 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
}
.Menu > li:hover, .Menu > li:active {
    position: relative;
}
.Menu li a {
    display: block;
    color: #000000;
    text-decoration: none;
}
.Menu > li > a {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: transparent;
}
.Menu > li > a:hover, .Menu > li > a:active {
    border-bottom-color: #A9A9A9;
}
.Menu li > ul {
    margin-top: 0px;
    /* to ensure that we dont leave the ul and the hovering effect stops */
    border-radius: 0 0 3px 3px;
    -o-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    box-shadow: 0px 0px 3px #888;
    padding: 0px 2px 2px 2px;
    background-color: White;
    position: absolute;
    left: -4000px;
    /* Hack to fix animation */
    min-width: 100%;
    opacity: 0;
    transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
}
.Menu li:hover > ul, .Menu li a:active + ul {
    left: -4px;
    z-index: 100;
    opacity: 1;
}
.Menu li ul > li {
    border-left-style: solid;
    border-left-width: 3px;
    border-left-color: transparent;
    padding: 0 3px;
    margin: 3px 0;
    white-space: nowrap;
}
.Menu li ul > li:hover, .Menu li ul > li:active {
    border-left-color: #A9A9A9;
}
.Menu li ul > li.Active {
    border-left-color: black;
}

2 Answers 2

3

IE 10 on Win8 seems to have a solution via an aria attribute: http://msdn.microsoft.com/en-us/library/jj152141%28v=vs.85%29.aspx

"On a page element that has a hover behavior that toggles the visibility of interactive content, set the element’s aria-haspopup property to "true" "
"When an Internet Explorer 10 user on a touch-enabled device first taps the page element, the user's experience will be identical to that of a user who hovers over the element with a cursor. Until the user taps elsewhere on the page, taps the element again, or navigates to another page, the element remains in its hover state. Additionally, default actions of the onclick event (such as navigation of a link) are not performed for the first tap on the page element."

1
  • 1
    This was the best solution, all i had i had to do is add the aria-haspopup to my a tags.
    – Peter
    Aug 23, 2013 at 9:20
3

You could add :focus every time you use :hover this will make the menu work with tabs and on mobile devices to.

Hope this helped you out.

edit: note: You could better hide the menu that folds open and make it visible on hover and focus. The way it is build now hitting tab will still go through the 'invisible' links.. And, sadly, they don't drop down on focus now.

solution?: I did some effort and found a 'fix'. This jsFiddle should work. But still :focus should be added in the other CSS rules to make the styling OK in all cases. And when a link in the 'drop-down' is in focus the menu should stay open. (But I don't think this will cause any problem on mobile.)

I just changed a little bit of CSS:

.Menu li a:hover + ul,
.Menu li a:focus + ul,
.Menu li a:active + ul
{
    left: -4px;
    z-index: 100;
    opacity: 1;
}

Note the '+'s.

6
  • I tried your changes but with no success jsfiddle.net/Z8Q8T/1 IE10 on my WP8 still doesn't open up the sub menu
    – Peter
    Apr 16, 2013 at 9:07
  • Thanks it seems to work even tho the sub menu becomes as wide as the page (but i guess that some other IE10 bug).
    – Peter
    Apr 16, 2013 at 9:54
  • It did the same in FF, It is some CSS rule that does not kick in. Not sure which one though :s Apr 16, 2013 at 10:01
  • Hmm the fix you applied seems to break the menu on the desktop... after adding back ".Menu li:hover > ul" it works again..
    – Peter
    Apr 16, 2013 at 10:44
  • 2
    @Petoj I've deleted all the existing CSS and added the basics to do the same in another way. Check this jsFiddle. As you can see you'll need to apply your design again. If this ain't working in all cases you should opt for a javascript solution OR search for another CSS on google :) Apr 16, 2013 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.