html下拉列表重叠在一起,CSS + HTML下拉菜单重叠问题

我的下拉菜单子项与父元素重叠有问题。请检查我的小提琴，以了解问题：

Fiddle example

HTML code：

• Category

  Text goes here

  Items count: tralala

  ---

  • Advertising(0)

  • Blalala(0)

  • Super megatron(0)

CSS代码：

#main_category_menu{

width: 100%;

}

#menu ul, #menu li {

line-height:22px;

text-align:left;

font-size:14px;

}

#menu {

list-style:none;

width:100%;

margin:0 auto;

height:45px;

padding:5px 30px;

}

#menu li {

float:left;

display:block;

position:relative;

text-align:center;

padding:4px 10px;

margin:7px 30px 0 0;

border:none;

}

#menu li:hover {

border:1px solid #b7b7b7;

border-bottom: none;

padding:4px 9px;

background: yellow;

border-radius:5px 5px 0 0;

-moz-border-radius:5px 5px 0 0;

-webkit-border-radius:5px 5px 0 0;

z-index: 10;

}

#menu li a {

font-size:14px;

color: #444444;

display:block;

outline:0;

text-decoration:none;

}

#menu li:hover a {

color:#161616;

}

#menu .menu-container{

margin:0px auto;

float:left;

position:absolute;

left:-999em;

text-align:left;

padding:10px 5px;

border:1px solid #b7b7b7;

background-color: #ffffff;

border-radius:0 5px 5px 5px;

-moz-border-radius:0 5px 5px 5px;

-webkit-border-radius:0 5px 5px 5px;

}

#menu .menu-container {

width:280px;

background: transparent url('logo.gif') no-repeat right bottom;

}

#menu li:hover .menu-container{

top:auto;

left:-1px;

}

#menu p, #menu h2, #menu h3, #menu ul li {

line-height:21px;

font-size:12px;

text-align:left;

}

#menu p {

line-height:18px;

margin-bottom:10px;

color:#F2E8E8;

}

#menu h3, #menu h2 {

font-size:11px;

margin:7px 0 14px 0;

padding-bottom:5px;

text-transform:uppercase;

color: #999999;

}

#menu li:hover div a {

color: #666666;

font-size: 11px;

padding-left: 6px;

}

#menu li:hover div a:hover {

color: #FAFAFA;

background:#99DE00;

}

#menu li ul {

list-style:none;

padding:0;

margin-bottom:12px;

}

#menu li ul li {

float: none;

font-size: 12px;

line-height: 24px;

margin: 0;

padding: 0;

position: relative;

text-align: left;

width: 100%;

}

#menu li ul li:hover {

background: none;

border: medium none;

margin: 0;

padding: 0;

}

试图添加z-index;但它不适用于我的。任何建议都会受到批评。

谢谢！ ：)