CSS를 사용하여 서로 다른 요소를 겹침

나는이 슬라이딩 드롭 다운 jquery 메뉴로 놀고있다. 나는 드롭 다운 영역을 약간의 여백으로 이동했습니다. 나는 액션을위한 트리거 인 부모 엘리먼트 위에 드롭 다운을 레이어하는 방법이 있기를 바랬다. Z-index를 시도했지만 운이 없었습니다. 누구든지 내가 뭘 잘못하고 있는지 알아?CSS를 사용하여 서로 다른 요소를 겹침

는 여기 라이브입니다 : http://daveywhitney.com/overlay/sliding_menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sliding Menu Tutorial | HV-DESIGNS.CO.UK</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/slider.js"></script> 

</head> 

<body> 
<div id="container"> 
<div id="header"> 
</div> 

<div id="button"> 
<div id="trigger"> 
<img src="images/button.png" width="184" height="32" class="menu_class" /> 
</div> 
<ul class="the_menu"> 
<li><a href="#">A Website #1</a></li> 
<li><a href="#">A Website #2</a></li> 
<li><a href="#">A Link #1</a></li> 
<li><a href="#">A Link #2</a></li> 
<li><a href="#">A Website #3</a></li> 
<li><a href="#">A Website #4</a></li> 
<li><a href="#">A Link #3</a></li> 
<li><a href="#">A Link #4</a></li> 
</ul> 
</div> 

</div> 
</body> 
</html> 

body { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    background-color: #333333; 
} 

#container { 
    margin: auto; 
    width: 490px; 
} 

#header { 
    background-image: url(images/header.png); 
    background-repeat: no-repeat; 
    height: 42px; 
    width: 490px; 
    margin-bottom: 20px; 
} 

#button { 
    height: 32px; 
    width: 184px; 
    margin: auto; 
} 

ul, li { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

.menu_class { 
    border:1px solid #1c1c1c; 

} 
#trigger { 
    z-index:-1; 
} 
.the_menu { 
    display:none; 
    width:300px; 
    border: 1px solid #1c1c1c; 
    margin:-50px 0 0 50px; 
    z-index:100; 
} 

.the_menu li { 
    background-color: #302f2f; 
} 

.the_menu li a { 
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block; 
} 

.the_menu li a:hover { 
    padding:10px; 
    font-weight:bold; 
    color: #F00880; 
}

출처

2011-03-20 Davey