Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE10 stopping menu from working correctly

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #205153
    AsteroidMonkey
    Participant

    Please see a menu I’m using on a site below. It works fine in most browsers but with IE10 (IE11 is fine) when you hover over a menu item then go to select a sub menu item, when the cursor goes into any of the small gaps between the vertical sub menu items the menu thinks the user has went outside the submenu and it closes.

    Can anybody tell me what is causing this to happen in IE10 and nothing else?

    http://codepen.io/anon/pen/BNPagB

    Regards, Marc

    #205154
    Paulie_D
    Member

    Just curious, where to the gaps come from?

    I can’t see how they are created from a quick glance.

    #205155
    AsteroidMonkey
    Participant

    #nav ul ul li {
    float:none;
    position:relative;
    margin:0px;
    font-size:14px;
    padding-top:1px; < Here
    padding-bottom:1px; <And Here
    padding-left:2px;
    }

    #205157
    Senff
    Participant

    I can’t replicate it in IE10, and I can’t really say why it’s happening…but I would suggest to try and get rid of that padding, and replace it with borders on the A (not the LI). Something like this:

    http://codepen.io/senff/pen/mJjyXy

    #205170
    Paulie_D
    Member

    But padding is still part of the li so that wouldn’t cause ‘unhovering` and causing the submenus to disappear so there must be something else going on

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.