html - Css Dropdown absolute 不显示，但 relative 显示

Question

我正在尝试构建一个 css 下拉菜单。

我的主下拉菜单(第一个 ul)的 position 为 relative，第二个下拉菜单的 position 作为绝对。

但是如果我在 absolute 上使用它，它会这样做:

如果我在 relative 上有它，我会得到这个:

这是标记:

<li class='active has-sub'>
    <a href="#">
        <div class="profile">
            <img src="images/avatar.png" /> <span>Josh</span> <img src="images/arrow-down-dark.png" class="arrow_down" /><br />
        </div>
    </a>
    <ul>
        <li><a href="#"><span>Opt 1</span></a></li>
        <li><a href="#">Opt 2</a></li>
        <li><a href="#">Opt 3</a></li>
        <li class='last'><a href="#">Log out</a></li>
    </ul>
</li>

和CSS:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 99;
}

#cssmenu .has-sub:hover > ul {
    display: block;
}
#cssmenu .has-sub ul {
    display: none;
    position: relative;
    width: 200px;
    top: 100%;
    left: 0;
}

**更新**

ochi 要求更多代码，所以我将发布与菜单本身相关的所有 css 代码:

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
    margin: 0;
    padding: 0;
    position: relative;
}
#cssmenu {
    line-height: 1;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
}
#cssmenu a {
    color: #000;
    display: block;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    padding: 12px 20px;
    font-size: 14px;
    text-decoration: none;
}
#cssmenu ul {
    list-style: none;
}
#cssmenu > ul > li {
    display: inline-block;
    float: left;
    margin: 0;
}
#cssmenu.align-center {
    text-align: center;
}
#cssmenu.align-center > ul > li {
    float: none;
}
#cssmenu.align-center ul ul {
    text-align: left;
}
#cssmenu.align-right > ul {
    float: right;
}
#cssmenu.align-right ul ul {
    text-align: right;
}
#cssmenu > ul > li > a {
    color: #ffffff;
    font-size: 12px;
}
#cssmenu > ul > li:hover:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #9c9c9c;
        margin-left: -10px;
}

#cssmenu > ul > li.cssno {
    color: #fff;
    display: block;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    padding: 12px 20px;
    font-size: 14px;
    text-decoration: none;
}

#cssmenu > ul > li.cssno:hover:after {
    border-bottom: none;
}
#cssmenu > ul > li:first-child > a {
     border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}
 #cssmenu.align-right > ul > li:last-child > a {
     border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
}

#cssmenu > ul > li:hover > a {
    color: #fff;
}

#cssmenu > ul > li.active > a {
    color: #000;
}
#cssmenu .has-sub {
    z-index: 1;
}
#cssmenu .has-sub:hover > ul {
    display: block;
}
#cssmenu .has-sub ul {
    display: none;
    position: absolute;
    width: 200px;
    height: auto;
    top: 100%;
    left: 0;
    z-index: 999999;
}
#cssmenu.align-right .has-sub ul {
    left: auto;
    right: 0;
}
#cssmenu .has-sub ul li {
    *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
    background: #0fa1e0;
    border-bottom: 1px dotted #31b7f1;
    font-size: 11px;
    display: block;
    line-height: 120%;
    color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
    background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
    color: #ffffff;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
    left: auto;
    right: 100%;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
    border-bottom: 0;
}

及其下方带有导航的菜单标记:

<header>
            <div class="wrapper">
                <section class="top_bar">
                    <a href="#"><div class="logo"><img src="images/activated_logo_dark.png"></div></a>
                    <div class="profile_info_meta" id="cssmenu">
                        <ul id="cssmenu">
                            <li>
                                <a href="#">
                                    <div class="item bell">
                                        <img src="images/bell.png" />
                                        <p>7</p>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="item calendar">
                                        <img src="images/calendar.png" />
                                        <p>3</p>
                                    </div>
                                </a>
                            </li>
                            <li class="cssno"><div class="item vertical_divider"></div></li>
                            <li class='active has-sub'>
                                <a href="#">
                                    <div class="profile">
                                        <img src="images/avatar.png" /> <span>Josh</span> <img src="images/arrow-down-dark.png" class="arrow_down" /><br />
                                    </div>
                                </a>
                                <ul>
                                    <li><a href="#"><span>Opt 1</span></a></li>
                                    <li><a href="#">Opt 2</a></li>
                                    <li><a href="#">Opt 3</a></li>
                                    <li class='last'><a href="#">Log out</a></li>
                                </ul>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </section>
            </div> <!-- end of wrapper -->
            <section class="nav">
                <div class="wrapper">
                    <nav>
                        <ul>
                            <li><a href="#">Dashboard</a></li>  
                            <li><a href="#">Referrals</a></li>
                            <li><a href="#">Search</a></li>
                            <li><a href="#">Events</a></li>
                            <li><a href="#">Groups</a></li>
                            <li><a href="#">News</a></li> 
                        </ul>
                    </nav>
                    <a href="#"><div class="edit_profile">Edit Profile</div></a>
                    <div class="clearfix"></div>
                </div> <!-- end of wrapper -->
            </section> <!-- end of nav --> 
        </header>

当我使用 relative 时，它会像这样向下推送内容:

同时它最初看起来像这样:

Answer 1

最初发布的 CSS 足以重现该问题，但 HTML 则不然。

我加了这个

<ul id="cssmenu">
        ...
</ul>

现在可以了:

演示:JSFiddle

更新:JSFiddle