内容容器下的CSS下拉菜单

Question

我尝试仅使用css制作下拉菜单，现在问题是我的下拉菜单隐藏了我的内容。我不知道为什么它不起作用，我尝试使用z-index但没有任何效果。这是一个jsfiddle示例和一些代码 请帮帮我，谢谢。

http://jsfiddle.net/42c6q/

HTML

<div class="wrapper">
    <div class="patterned">
        <div class="container">
            <ul id="main_menu">
                <li class="logo">
                    <a href="#">
                        <img src="images/logo.png" alt="De Pannenkoekenbus Logo"/>
                    </a>
                </li>
                <li class="red">
                    <a href="#">Home</a>
                </li>
                <li class="green">
                    <a href="#">Evenementen</a>
                    <ul class="submenu">
                        <li>
                            <a href="#">Item</a>
                        </li>
                        <li>
                            <a href="#">Item</a>
                        </li>
                        <li>
                            <a href="#">Item</a>
                        </li>
                    </ul>
                </li>
                <li class="blue">
                    <a href="#">Bus</a>

                </li>
                <li class="orange">
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div id="content">

        </div>
    </div>
</div>

CSS

.wrapper{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
    background: url("images/kaart_bg.jpg");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 0;
}

/* MENU */
#main_menu{
    margin:0;
    padding:0;
    height: 130px;
    padding: 20px 0;
    overflow: hidden;
    z-index: 2;
}
#main_menu li{
    list-style: none;
    float: left;
    line-height: 50px;
    margin-left: 30px;
    width: 130px;
    text-align: center;
    margin-top: 40px;
    position: relative;
}
#main_menu li a, #footer_menu li a {
    color: #FFFFFF;
    text-shadow: 0px 1px 1px #000;
    display: block;
    font-family: 'PT Sans', sans-serif;
    text-decoration: none;
    font-size: 15pt;
}
#main_menu .logo{
    background: none;
    width: 224px;
    margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
    text-decoration: underline;
}
#main_menu li .submenu{
    display: none;
    margin: 0;
    padding: 0;
    z-index: 10;
    position: absolute;
    left: 0;
    top:100%;
}
#main_menu li .submenu:hover{
    display: block;
}
#main_menu li a:hover + .submenu{
    display: block;
}
#main_menu li .submenu li{
    margin: 0;
    padding: 0;
}
#main_menu li .submenu li a{
    font-size: 12pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }

/* CONTENT */
#content{
    padding: 20px 0;
    overflow: hidden;
    margin:  0;
    padding: 20px;
}

Answer 1

在您的#main_menu中，您overflow:hidden将其删除：

#main_menu{
    margin:0;
    padding:0;
    height: 130px;
    padding: 20px 0;
    /*overflow: hidden; Remove this*/
    z-index: 2;
}

演示http://jsfiddle.net/42c6q/2/

Answer 2

从overflow: hidden

中删除#main_menu

working demo

Answer 3

#main_menu {
overflow: hidden; /*remove overflow */ 
}