css下拉菜单折叠答案

【问题标题】：css drop down menu collapsescss下拉菜单折叠
【发布时间】：2012-12-16 11:47:56
【问题描述】：

http://i.imgur.com/cA2xV.png

我的下拉菜单位于下一个 div 元素下，您知道如何解决这个问题吗？

CSS：

 .cf ul li{
float:left;
margin: 0;
padding: 0;
list-style:none;
font-family:"open sans", sans-serif;

}

.cf li a {
display:block;
padding:0 1em;
line-height: 2.5em;
color:#FFFFFF;
}

.cf li a:hover {
background-color:#ffa627;
}


li{
position:relative;
}
ul.submenu {
float:none;
background: #222;
position:absolute;
left:-9000em;
}

.topmenu li:hover ul{
left:0;
}   

ul.submenu li {
float:none;
}

#nav-bar nav {
background-color: #222;

}

.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}

.cf:after {
clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;

.callout1 {
background-color: #fff; 
text-align: center; 
padding: 20px 0px;
width:319px;
text-decoration:none;
font-family: 'Open Sans', sans-serif;
color:#222;
border-right: 1px solid #EFEFEF; 
float:left;

}

HTML：

<div id="nav-bar" class="cf">
                <nav class="cf">
                    <ul class="topmenu">
                        <li class="hometop"><a href="#" class="hometop">Home</a></li>
                        <li ><a href="#" >Catagory</a>
                            <ul class="submenu">
                                <li><a href="#">Blah Blah</a></li>
                                <li><a href="#">Blah UGG</a></li>
                            </ul>
                        </li>
                        <li ><a href="#">About</a></li>
                        <li ><a href="#">How To Order</a></li>
                    </ul>
                </nav>

            </div>
<div id="extra-info">
                <nav>
                    <ul>
                        <li><a href="#" class="callout1">Do You Have Any Questions? <br>Contact Us</a></li>

第一次做网站，把我的头发拉出来，现在整天都在想这个，请各位开发者速速帮忙！

已编辑：已粘贴“您有任何问题联系我们”div html 及其 css。

【问题讨论】：

使用 z-index w3schools.com/cssref/pr_pos_z-index.asp
发布你有任何问题的div代码及其css
感谢乔纳森，将 z 索引添加到 ul.submenu 中，它就像一个魅力。 :)

标签： html css drop-down-menu css-float collapse

【解决方案1】：

试试这样的。我希望这个 CSS 类应该可以工作

.cf{
   position:relative; 
   z-index:9999;
}

【讨论】：

【解决方案2】：

你可以通过将更大的 z-index 放到下拉列表中来做到这一点

堆栈顺序较大的元素总是在堆栈顺序较低的元素之前。

喜欢

div{
  z-index:5;
}

.dropdown{
   z-index:6;
}


Note: z-index only works on positioned elements

(position:relative , position:absolute, or position:fixed).

【讨论】：