Menu Going Under Elements in IE

[Aerdan]

Here is the test site I'm filling out:

http://www.castbuzz.com/test/

In IE, the menu is going under the mini-menu below it. I tried adjusting z-index, but it's not working right. If I don't have the div containers within the box-info class, then it'll go over the elements, but nesting more elements inside it makes them stay on top of the menu. For reference sake, here is the CSS from the area in question:

CSS

Code: Select all

/* drop down menu */
#menu ul {
    position:absolute;
    top:52px;
    left:0;
    display:none;
    padding:0;
    margin:0;
    list-style:none;
    width:196px;
    border:1px solid #304878;
    border-width:0 1px 1px;
    z-index:10;
}

#menu ul li {
    float:left;
    width:196px;
    z-index:10;
}

#menu ul li a {
    font:12px/28px Arial, sans-serif;
    color:#fff;
    background:url(../images/bg-drop.jpg) repeat-x;
    padding:0 0 0 13px;
    width:183px;
    text-decoration:none;
}

#menu ul li a:hover { background:url(../images/bg-drop-over.jpg) repeat-x; }

HTML

Code: Select all

            <!--content-->
            <div id="content">
                <!--menu-->
                <ul id="menu">
                    <li><a href="#" class="home">Home</a></li>
                    <li><a href="#" class="news">Latest News</a></li>
                    <li>
                        <a href="#" class="students">CP Students</a>
                        <ul>
                            <li><a href="#">Overview</a></li>
                            <li><a href="#">Optimizing Your Program</a></li>
                            <li><a href="#">Program Guides</a></li>
                            <li><a href="#">In the Area</a></li>
                            <li><a href="#">Feature Articles</a></li>
                            <li><a href="#">Submit a Guide/Link</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="alumni">CP Alumni</a>
                        <ul>
                            <li><a href="#">Overview</a></li>
                            <li><a href="#">In the Area</a></li>
                            <li><a href="#">Helping New CP Students</a></li>
                            <li><a href="#">Share Your Experience</a></li>
                            <li><a href="#">Submit a Guide/Link</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="campus">Campus Reps</a>
                        <ul>
                            <li><a href="#">Overview</a></li>
                            <li><a href="#">Campus Outreach</a></li>
                            <li><a href="#">Submit a Guide/Link</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="forums">Community Forums</a></li>
                </ul>
                <!--main box-->
                <div class="box">
                    <div class="box-bg">
                        <div class="box-info">
                            <div class="maincolumn">
                                <ul id="nav-b">
                                    <li><a href="#" class="news">Latest News</a></li>
                                    <li><a href="#" class="guides">Program Guides</a></li>
                                    <li><a href="#" class="articles">Buzz Articles</a></li>
                                    <li><a href="#" class="journal">Site Journal</a></li>
                                </ul>
                            </div>
                            <div class="sidecolumn">Test</div>
                        </div>
                    </div>
                    <div class="box-foot">&nbsp;</div>
                </div>
            </div>

Undoubtedly I'm misunderstanding the concept =[ Thanks in advance for your help!

[awatson]

I had a problem a while back that sounds similar - I found this article helpful: http://annevankesteren.nl/2005/06/z-index