html - 相对于非直接父容器的绝对定位

Question

我正在尝试创建一个下拉菜单，类似于 NASA 网站上的菜单。我的问题是我试图相对于整个列表定位内联列表项的子列表。无论我做什么，它最终都会相对于容器 li 进行定位。我包含了一部分代码以使其更清晰。

HTML:

<ul class="mainNavBar headerElement">
                    <li class="home"> <!--#webmaster The odd-looking closing tags on the list items are intentional.  They fix cross-browser compatability issues-->
                        <hgroup>
                            <h1>Home</h1>
                            <h2>Welcome</h2>
                        </hgroup>
                    </li
                    ><li id="about">
                        <hgroup>
                            <h1>About</h1>
                            <h2>Our Vision</h2>
                        </hgroup>
                        <ul>
                            <li>
                                <h1>About FIRST</h1>
                            </li
                            ><li>
                                <h1>About the Team</h1>
                            </li
                            ><li>
                                <h1>About this Site</h1>
                            </li
                            ><li>
                                <h1>FIRST Resources</h1>
                            </li>
                        </ul>
                    </li
                    ><li id="team">
                        <hgroup>
                            <h1>Team</h1>
                            <h2>Who We Are</h2>
                        </hgroup><!--
                        <ul>
                            <li>
                                <h1>Structure</h1>
                            </li
                            ><li>
                                <h1>Subteams</h1>
                                <ul>
                                    <li>
                                        <h2>Mechanical</h2>
                                    </li
                                    ><li>
                                        <h2>Electrical</h2>
                                    </li
                                    ><li>
                                        <h2>Programming</h2>
                                    </li
                                    ><li>
                                        <h2>Non-Tech</h2>
                                    </li
                                    ><li>
                                        <h2>Spirit</h2>
                                    </li
                                    ><li>
                                        <h2>Awards</h2>
                                    </li>
                                </ul>
                            </li
                            ><li>
                                <h1>Members</h1>
                            </li
                            ><li>
                                <h1>Mentors</h1>
                            </li
                            ><li>
                                <h1>Sponsors</h1>
                            </li>
                        </ul>-->
                    </li
                    ><li id="projects">
                        <hgroup>
                            <h1>Projects</h1>
                            <h2>What We Do</h2>
                        </hgroup><!--
                        <ul>
                            <li>
                                <h1>Robots</h1>
                                <ol>
                                    <li>
                                        <h2>2011- Geoffery</h2>
                                    </li
                                    ><li>
                                        <h2>2010- Ahab</h2>
                                    </li
                                    ><li>
                                        <h2>2009- Redemption</h2>
                                    </li
                                    ><li>
                                        <h2>More Robots...</h2>
                                    </li>
                                </ol>
                            </li
                            ><li>
                                <h1>Competition</h1>
                                <ul>
                                    <li>
                                        <h2>Schedule</h2>
                                    </li
                                    ><li>
                                        <h2>The Game</h2>
                                    </li
                                    ><li>
                                        <h2>The Rules</h2>
                                    </li
                                    ><li>
                                        <h2>Scouting</h2>
                                    </li
                                    ><li>
                                        <h2>Awards</h2>
                                    </li>
                                </ul>
                            </li
                            ><li>
                                <h1>Outreach</h1>
                                <ul>
                                    <li>
                                        <h2>FLL Competition</h2>
                                    </li
                                    ><li>
                                        <h2>Mentoring</h2>
                                    </li
                                    ><li>
                                        <h2>Service</h2>
                                    </li>
                                </ul>
                            </li>
                        </ul>-->
                    </li
                    ><li id="media">
                        <hgroup>
                            <h1>Media</h1>
                            <h2>Pics & Blog</h2>
                        </hgroup><!--
                        <ul>
                            <li>
                                <h1>Blog</h1>
                            </li
                            ><li>
                                <h1>Photos</h1>
                            </li
                            ><li>
                                <h1>Videos</h1>
                            </li
                            ><li>
                                <h1>In the News</h1>
                            </li>
                        </ul>-->
                    </li
                    ><li id="resources">
                        <hgroup>
                            <h1>Resources</h1>
                            <h2>Documents, Etc.</h2>
                        </hgroup><!--
                        <ul>
                            <li>
                                <h1>Documents</h1>
                            </li
                            ><li>
                                <h1>Robot Manual</h1>
                            </li
                            ><li>
                                <h1>Calendar</h1>
                            </li>
                        </ul>-->
                    </li>
                </ul>

和 CSS:

div.header { /*#webmaster @webmaster change to header*/
    min-width:844px;
    padding-left:146px;
    padding-right:0px;
    background-color:#003d00;
    margin:0px;
    height:156px;
    position:relative;
}

div.header .headerElement { /*#webmaster @webmaster change to header .headerElement*/
    float:left;
    position:relative;
}

div.header object.team422Logo { /*#webmaster @webmaster change to header object.team422Logo*/
    height:146px;
    width:146px;
    right:146px;
    top:5px;
    float:left;
}

ul.mainNavBar {
    padding:0px;
    margin:0px;
    margin-top:0px;
    margin-left:-146px;
    width:100%;
    clear:right;
    height:75px;
    float:left;
    position:relative;
}

ul.mainNavBar > li {
    min-width:140px;
    width:16.6%;
    padding:0px;
    margin:0px;
    height:75px;
    border-left:2px solid #ffffff;
    border-bottom:2px solid #ffffff;
    margin-left:-2px;
    text-indent:5%;
    display:inline-block;
    vertical-align:text-top;
    color:#ffffff;
    background-color:#003d00;
}

ul.mainNavBar > li:first-child {
    width:17%;
}

ul.mainNavBar > li:hover {
    color:#003d00;
    background-color:#ffffff;
}

ul.mainNavBar > li > hgroup > h1 {
    font-size:22px;
    margin-top:10px;
}

ul.mainNavBar > li > hgroup > h2 {
    font-size:14px;
}

ul.mainNavBar > li > ul {
    position:absolute;
    z-index:1;
    color:#ffffff;
    list-style-type:none;
    background-image:url('dropDownBackground.png');
    height:250px;
    width:100%;
    margin:0px;
    padding:0px;
}

ul.mainNavBar > li > ul > li {
    display:inline-block;
    padding:0px;
    margin:0px;
}

ul.mainNavBar > li > ul > li > h1 {
    font-size:22px;
    text-align:center;
    margin:0px;
    padding:0px;
    margin-top:10px;
}
/*
ul.mainNavBar > li ul li ul li {
    display:inline-block;
    vertical-align:top;
    height:240px;
    border-top:10px solid #ffffff;
    border-left:2px solid #ffffff;
    border-bottom:5px solid #ffffff;
    margin-left:-2px;
}*/
/*
#about {
    left:17%;
}

#team {
    left:33.6%;
}

#projects {
    left:50.2%;
}

#media {
    left:66.8%;
}

#resources {
    left:83.4%;
}
*/
#about > ul > li {
    width:25%;
    padding:0px;
}

#team > ul > li {
    width:20%;
    padding:0px;
}

#projects > ul > li {
    padding:0px;
    width:33.3%;
}

#projects > ul > li:first-child {
    padding:0px;
    width:33.4%;
}

#media > ul > li {
    padding:0px;
    width:25%;
}

#resources > ul > li {
    padding:0px;
    width:33.3%;
}

#resources > ul > li:first-child {
    padding:0px;
    width:33.4%;
}

Answer 1

如果您添加位置，即左侧和顶部，它应该可以工作

ul.mainNavBar > li > ul {
left:100px
top:10px
}