Question

I have a problem regarding the CSS Float and Position in IE6, the Tree View I implemented the 2nd level child is not display to left when mouse hover, this is not happen in IE7-9 and other browser (Mozilla FireFox & Chrome) but IE6.

please find my sample Tree View code fragment as below:

<style type="text/css">
    .treeView
    {
        font-family: Century Gothic;
        font-size: 13px;
        font-weight: bold;
        color: #ff6500;
    }

    /* hyperlink style */
    .treeView a
    {
        color: #ff6500;
        text-decoration: none;
    }

    /* hyperlink hover style */
    .treeView a:hover
    {
        color: #ff6500;
        text-decoration: underline;
    }

    .treeView ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 246px;
    }

    .treeView ul li
    {
        height: 100%;
        background: #def0f6;
        position: relative;
        float: left;
        width: 100%;
        z-index: 3;
    }

    /* item background color */
    .treeView li
    {
        background: #def0f6;
        border-top: 1px solid #007dc6;
        border-left: 1px solid #007dc6;
        border-right: 1px solid #007dc6;
    }

    .treeView ul li a, .treeView ul li span
    {
        display: block;
        padding: 5px 8px 5px 15px;
    }

    /* hide and align child item, and child width */
    .treeView ul ul
    {
        position: absolute;
        top: -1px;
        visibility: hidden;
    }

    /* item background color when hover */
    .treeView li:hover
    {
        background: #ffffd8;
    }

    /* display child item when hover parent item */
    .treeView li:hover > ul
    {
        visibility: visible;
    }

    /* align 2nd child item to left when hover parent item */
    .treeView li:hover ul
    {
        display: block;
        left: 246px;
    }
</style>

<div class='treeView'>
    <ul>
        <li><span class='submenu'>Level 1</span>
            <ul>
                <li><a href='#' class='submenu'>Level 2</a>
                    <ul>
                        <li><a href='#'>Level 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

I suspected it is due to the CSS Float:left and Position:Relative.
Any idea how is float:left work in IE 6? Please help

Thank you in advanced.

Answer 1

The child selector > does not work in IE6. You can do it by rewriting your CSS so it applies more generally, or use classes to identify the level you are at.
There might be an other problem; you should use display: none; instead of visibility: hidden. visibility changes really only the visibility, but layout etc. is affected. display: none takes the element out and is what you really want.