0

I built the following website basically from scratch, and it works perfectly on most browsers (Chrome, Firefox, Safari, Edge), but unsurprisingly not on IE (tested on 9,10,11): Alliance Française du Manitoba

The problem is with the dropdown menus. When hovering over one of the menu headers (<div class="headerMenuItem">), a mega-menu (<div class="headerMenuDropdown">) should appear. Currently, when hovering, the headerMenuItems are highlighting, as expected, but the child headerMenuDropdown isn't appearing.

/***Header Menu***/

#headerMenu { /*Menu Wrapper*/
    float: left;
    margin: 12px auto 0px;
    padding: 0px;
}

.headerMenuItem { /* Individual menu item */
    display: block;
    float: left;
    overflow: hidden;
    border-radius: 5px 5px 0px 0px;
    margin-top: 6px;
    padding-bottom: 10px;
}

.headerMenuItem:hover {
    background-color: #d4d9db;
    text-decoration: none;
}

.headerMenuItem>a {
    padding: 8px 12px 0px;
    text-align: center;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
    color: #444;
}

.headerMenuItem a:hover { /* override default link behaviour */
    text-decoration: none;
    color: #444;
}

/*Menu expand*/

.headerMenuDropdown { /* mega-menu wrapper */
    float: left;
    display: none;
    position: fixed;
    background-color: white;
    width: 100%;
    left: 0;
    top: 100%;
    border-top: 1px solid #da002e;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 105;
    text-align: center;
}

.headerMenuItem:hover .headerMenuDropdown { /*Display dropdown*/
    display: block;
    animation: headerDropdownAppear;
    animation-duration: 0.4s;
}

@keyframes headerDropdownAppear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Create up to 6 equal columns that floats next to each other */

.row {
    width: 1200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.column {
    float: left;
    width: 15.53848%;
    padding: 10px 10px 10px 0px;
}

.column span,
.column a {
    float: none;
    text-decoration: none;
    display: block;
    text-align: left;
    padding: 1px;
}

.column>span {
    font-weight: bold;
}

.column>span>span {
    padding-left: 15px;
    text-indent: -10px;
    font-weight: lighter;
    font-size: 0.8em;
}

.column>span>span>a {
    padding-left: 15px;
    margin-left: -15px;
    padding-bottom: 3px;
    line-height: 120%;
}

.column a:hover {
    background-color: #d4d9db;
}
<div id="headerBottom">
    <nav id="headerMenu">
        <div class="headerMenuItem">
            <a href="#">Learn French</a>
            <div class="headerMenuDropdown">
                <div class="row">
                    <div class="column">
                        <span>
                            <a href="columnLink1">Column 1</a>
                            <span>
                                <a href="link1">Link 1</a>
                            </span>
                            <span>
                                <a href="link2">Link 2</a>
                            </span>
                            ...
                        </span>
                    </div>
                    <div class="column">
                        <span>
                            <a href="columnLink2">Column 2</a>
                            ...
                        </span>
                    </div>
                    ...
                </div>
            </div>
        </div>
        <div class="headerMenuItem">
            <a href="#">Tests &amp; Exams</a>
            <div class="headerMenuDropdown">
                <div class="row">
                    ...
                </div>
            </div>
        </div>
        ...
    </nav>
    ...
</div>

I assumed that this had to do with one of two known IE bugs:

  1. :hover inconsistencies
  2. Unsuported > selector

However, both of these should have been phased out as issues by IE 9, but I'm having issues on IE 11! I've got a proper <!DOCTYPE html>, HTML5Shiv, and even crossover.htc, but nothing seems to work.

This leads me to think that the issue is with the CSS selector
.headerMenuItem:hover .headerMenuDropdown
EDIT: However, IE Inspector shows that it's behaivng properly!

Any known fixes?

Anatol Rennie
  • 3
  • 3
  • 1
    Well, for starters, IE9+ should both support the direct descendant selector (`>`) and the `:hover` pseudo-selector, Though for sure there could be some inconsistencies with `:hover`. whether it simply *works* or not should not be one of them. – TylerH Aug 22 '18 at 19:30
  • 1
    Also, your HTML is currently invalid; you open a ``? – TylerH Aug 22 '18 at 19:33
  • @TylerH well-spotted, though it's correct in the actual code. I just made that mistake when condensing! I'll fix for clarity. – Anatol Rennie Aug 22 '18 at 19:39
  • I don't know what it's supposed to look like, but we're not seeing anything here because of `top: 100%;` - you're basically pushing the dropdown menus down 100% of the height of the screen so the top of the submenu is below the bottom of the viewport: Switch `top: 100%;` to `top: 50%;` or `top:50px;` to see the difference: http://jsfiddle.net/9wr0816h/5/ – TylerH Aug 22 '18 at 19:47
  • @TylerH: there's a
    tag around all of this, so the `top: 100%` is to the bottom of the header, not the viewport. Again, it works well on all other browsers. See working version at [http://www.afmanitoba.ca](http://www.afmanitoba.ca).
     – Anatol Rennie Aug 23 '18 at 22:17
  • @TylerH: actually, you were sort of right, my bad. `top: 100%` was indeed forcing it to the **bottom of the screen,** as you said. However, all other browsers correctly put it at the **bottom of the parent ` – Anatol Rennie Aug 23 '18 at 22:24
  • Sometimes differences between browsers can be [quite](https://stackoverflow.com/questions/40551057/positionfixed-within-positionfixed-which-browser-is-correct/40552267#40552267) [frustrating](https://stackoverflow.com/questions/28576291/positionfixed-element-within-a-positionrelative-parent-which-browser-renders/28576596#28576596) – TylerH Aug 24 '18 at 13:45

0 Answers0