JAB 0

I'm creating a menulike collection of nested divs (there may be better ways to do it, but this method seems to work fine for my purposes), and have sets of divs become visible when their parents are hovered over (using :hover, with a tweak to allow the use of :hover for any tag in IE 6), and kept hidden otherwise; in both Firefox and IE, parent divs that are themselves nested remain visible when the mouse is hovering over their children.

However, while this all works fine in Firefox, it has a problem in IE: when moving the mouse along a set of child divs, :hover seems to be stopped/onmouseout seems to be called when the mouse moves below the bottom of the outermost div. How exactly do I fix this?

HTML snippet that exhibits the aforementioned behavior (note that a doctype declaration is required for it to work properly):

        <div id="wrap">
            <div class="top">
                <div>Layer 1 - 1</div>
                <div class="menu">
                    <div>
                        <div>Layer 2 - 1</div>
                        <div class="menu">
                            <div>Layer 3 - 1</div>
                            <div>Layer 3 - 2</div>
                            <div>Layer 3 - 3</div>
                            <div>Layer 3 - 4</div>
                            <div>Layer 3 - 5</div>
                            <div>Layer 3 - 6</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top">
                <div>Layer 1 - 2</div>
                <div class="menu">
                        <div>Layer 2 - 1</div>
                        <div>Layer 2 - 2</div>
                        <div>Layer 2 - 3</div>
                        <div>Layer 2 - 4</div>
                        <div>Layer 2 - 5</div>
                </div>
            </div>
        </div>

CSS that goes with it:

body { behavior: url("csshover3.htc"); } /* http://www.xs4all.nl/~peterned/csshover.html */

#wrap
{
    background-color: #99CCFF;
    border-style: solid;
    border-color: black;
    border-width: 0 2px 2px 2px;
    float: left;
}

.top
{
    position: relative;
    background-color: #99CCFF;
    border-style: solid;
    border-color: black;
    border-width: 2px 0 0 0;
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
}

.top:hover { background-color: #79ACDF }

div:hover > div.menu { visibility: visible; }

.menu
{
    border-style: solid;
    border-color: black;
    border-width: 0 0 2px 2px;
    position: absolute;
    top: 0%;
    left: 100%;
    visibility: hidden;
}

.menu > div
{
    position: relative;
    padding-right: 2px;
    padding-left: 2px;
    border-style: solid;
    border-color: black;
    border-width: 2px 2px 0 0;
    background-color: #CCFFFF;
}

.menu > div:hover { background-color: #ACDFDF; }

(I realize that IE 6 doesn't support the > selector, and thus should alter that bit, but that doesn't seem to be the cause of the problem I'm asking about and thus isn't that important at the moment.)

1 answer

Mottie 1134
0
points
This was chosen as the best answer

Actually I think the problem is related to the > selector. Try just removing the > from the CSS and see what happens.

I didn't test out your code because to me it sounds like you are trying to reproduce the suckerfish drop down menu. And if you are just trying to get a menu system going, then I'd recommend using it, but if you are trying to learn how to do it yourself, then maybe you could look at their CSS to get you pointed in the right direction.

I guess I'm saying I haven't had my caffeine yet this morning, so I can't be bothered to run IE and test this yet LOL.

Answered over 6 years ago by Mottie
  • Thanks, I'll take a look at it. JAB over 6 years ago
  • ...Interesting. I had to assign a background color to the <li> elements when being hovered over for it to actually work in IE. (Otherwise the elements would hide when I tried to move to a submenu.) JAB over 6 years ago