CODEWITHSUNDEEP
cssdrop-down-menucross-browser
Joe
Joe

Reputation: 1822

IE8 Issue with CSS-Controlled Dropdown Menus

I've created a site where I built a 3-level drop-down menu. Everything is working great in every browser I've tested in so far except for IE8. In IE8, when you hover over the highest level buttons, the drop-down menus appear. When you mouse over any secondary pages that have children under then, the menus SHOULD appear to the right of the parent page, and it does this in Chrome, Firefox, Safari, and IE9+.

I was hoping someone could take a look at the site and let me know if you've got any ideas.

http://sightlines.quantumdynamix.net/

Hover over "Who We Are" and "Our Team" should have a tertiary level menu, but it does not display in IE8.

Here is the CSS that displays the tertiary level menu:

#mainNavContainer .sub-menu li:hover > div > .sub-menu {
        display: block;
}

And here is the menu code (trimmed down since you wouldn't need the entire menu for this). Sorry for the large amount of classes, but it is a Wordpress menu.

<div id="mainNavContainer">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72">
                <a href="/who-we-are/">Who We Are</a>
                <div class="sub-menu-container">
                    <ul class="sub-menu">
                        <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
                            <a href="/who-we-are/our-story/">Our Story</a>
                        </li>
                        <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74">
                            <a href="/who-we-are/our-team/">Our Team</a>
                            <div class="sub-menu-container">
                                <ul class="sub-menu">
                                    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
                                        <a href="/who-we-are/our-team/executive-team/">Executive Team</a>
                                    </li>
                                    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                                        <a href="/who-we-are/our-team/leadership-team/">Leadership Team</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

Here is a screenshot of what is happening. The blue box is generated from the Dev Tools in IE8, indicating that the browser does know where the sub-menu should be, but it does not display when I hover over Our Team.

Example

Upvotes: 0

Views: 2007

Answers (2)

Joe
Joe

Reputation: 1822

This CSS was line was causing the error:

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444);

When I viewed the site in IE8's dev tools, that line read as follows:

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444); BORDER-LEFT: #d5d5d5 1px solid

Now that I've made changes to this, I cannot get the full list to come back, but originally many other styles besides the BORDER-LEFT appears in the filter line.

I'm unsure what in the filter was causing the error, but we decided to nix the drop shadow for ie8 or older users, and so removing the filter line fixed everything.

Upvotes: 1

Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

I cannot use Spoon.net — it is a paid service — but try this:

#mainNavContainer .sub-menu li:hover > div > .sub-menu:hover {
    display: block;
}

And please, try to give a picture of your problem.

Upvotes: 0

Related Questions