Question

I know this has probably already been answered, but I can’t find it easily among the numerous other complaints about IE7’s compatibility with dropdown menus. Basically, I went through a tutorial to make a basic dropdown menu. Works fine in other browsers except for IE7. Instead of the menu items dropping right below the tab, I get something like this:

Web Picture http://akasuna.com/00000/Twentyten_ie7_bug.jpg

Granted, this isn’t the same webpage as what I’m working on, but I don’t actually have it on the Internet, and this picture represents the exact same problem that I’m having.

CSS:

@charset "utf-8";

#main{
    width: 730px;
    margin-left: auto;
    margin-right: auto;
}

#regList{
    list-style-image:url(expbul1a.gif);
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

#navMenu{
    margin:0;
    padding:0;
}

#navMenu ul{
    margin:0;
    padding:0;
}

#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
}

#navMenu ul li a{
}

#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top:50px;
}

#navMenu ul li:hover ul{
    visibility:visible;
}

/**********************************************************/

#navMenu li:hover{
}

#navMenu ul li:hover ul li a:hover{
}

#navMenu a:hover{
}

.clearFloat{
    clear:both;
    margin:0;
    padding:0;
}

HTML:

<div id="navMenu">

    <ul>
        <li><a href="SBartletHomepageHTML.html"><img src="home_cmp_expeditn010_hbtn.gif"/></a></li><!--home header-->
    </ul>

    <ul>
        <li><a hrer=""><img src="Books.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="Normality is Not Mental Health.htm"><img src="Images/Normality is not Mental Health.gif"/></a></li>
                <li><a href="Conceptual Therapy.html"><img src="conceptual therapy.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Reflexivity.html"><img src="reflexivity.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Human Pathology.html"><img src="human pathology.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Critique.html"><img src="Critique of Normality.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Logic.html"><img src="Logic.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="When You Dont Know.html"><img src="When You Don't Know Where to Turn.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>

        </li>
    </ul>

    <ul>
        <li><a hrer=""><img src="PSYCHOLOGY.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="PsychEd.html"><img src="PsychEd.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Animal Rights.html"><img src="Animal Rights.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Effectiveness.html"><img src="Effectiveness.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Limitations.html"><img src="Limitations.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>
        </li>
    </ul>

    <ul>
        <li><a hrer=""><img src="PHILOSOPHY.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="Metalogic.html"><img src="MoR.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>
        </li>
    </ul>

    <ul>
        <li><a hrer=""><img src="LITERARY.htm_cmp_expeditn010_hbtn.gif"/></a>
            <ul>
                <li><a href="Sapphos Journal.html"><img src="Sappho's Journal.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Christs Journal.html"><img src="Christ's Journal.htm_cmp_expeditn010_hbtn.gif"/></a></li>
                <li><a href="Voices.html"><img src="Voices.htm_cmp_expeditn010_hbtn.gif"/></a></li>
            </ul>
        </li>
    </ul>

Answer 1

Make sure that whenever you use position:absolute you provide both a top and left (or bottom and right). Otherwise browsers will guess, and they are terrible guessers. For instance, in your case, I noticed that #navMenu ul ul does not have a left value.