Css Dropdown绝对不会显示，但相对确实如此

时间：2014-12-19 05:55:33

标签： html css html5 css3

我正在尝试构建一个css下拉列表。

我的主要下拉列表（第一个ul）position为relative，第二个下拉列表position为absolute。

但是，如果我在absolute上有它，它会这样做：

absolute

如果我在relative上有，我就明白了：

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时，它会按如下方式推送内容：

pushes content down

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

initial

3 个答案:

答案 0 :(得分：0)

绝对位置

以像素为单位给出顶部和左侧像素。

答案 1 :(得分：0)

这里#cssmenu没有使用父母。， 你改变那样

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

答案 2 :(得分：0)

最初发布的CSS足以复制该问题，但HTML不是。

我添加了这个

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

它现在有效：

DEMO：JSFiddle

更新：JSFiddle

相关问题
最新问题