CSS 두 번째 레벨 드롭 다운 메뉴

Question

저는 HTML/CSS에서 매우 초보자입니다. 한 단계 드롭 다운 메뉴 모음을 만들었습니다. 내가 가진 CSS에서 2 단계를 만들고 싶습니다. 이후 2 단계에 대한 코드에 대해 잘 모르겠지만, 아무도 다음 CSS를 도와 줄래?

.menu ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.menu ul li { 
    margin:0; 
    height:41px; 
    float:left; 
    border-right:1px solid #efefef; 
} 
.menu ul li ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
.menu ul li ul li { 
    margin:0; 
    height:41px; 
    float:left; 
    background:#fff; 
    border-right:1px solid #efefef; 
} 
.menu ul li .dwn{ 
    float:right; 
    top:-32px; 
    color:#505050; 
    margin-right:10px; 
    position:relative; 
    cursor:pointer; 
} 
.menu ul li a{ 
    padding:9px 28px 8px 28px; 
    display:block; 
    text-decoration:none; 
    color:#303030; 
} 
.menu ul li a:hover{ 
    background:url(images/menu_hover_bg.png) repeat-x; 
} 
.menu ul li .act{ 
    background:url(images/menu_hover_bg.png) repeat-x; 
} 
.menu ul li a span{ 
    width:24px; 
    height:24px; 
    display:inline-block; 
} 
#menu li{ 
    position: relative; 
} 
#menu li:hover > ul{ 
    display: block; 
} 
#menu ul{ 
    list-style: none; 
    margin:0; 
    padding:0; 
    display:none; 
    position:absolute; 
    top:41px; 
    z-index:99999; 
    background: #f5f5f5; 
    background: -moz-linear-gradient(top, #fcfcfc 0%, #f5f5f5 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f5f5f5)); 
    background: -webkit-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); 
    background: -o-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); 
    background: -ms-linear-gradient(top, #fcfcfc 0%,#f5f5f5 100%); 
    background: linear-gradient(to bottom, #fcfcfc 0%,#f5f5f5 100%); 
    -moz-border-radius: 2px; 
    border-radius: 2px; 
    border-left:1px solid #d9d9d9; 
    -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
    -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5); 
} 
#menu ul li{ 
    float: none; 
    margin: 0; 
    padding: 0; 
    width:auto; 
    display: block; 
} 
#menu ul .active{ 
    background: #fff9dc; 
    font-weight:bold; 
} 
#menu ul a{ 
    border-bottom:1px solid #f4f4f4; 
    height: 23px; 
    display: block; 
    padding-left:30px; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
    font-size:14px; 
    text-decoration:none; 
    color:#303030; 
} 

Answer 1

사용이 튜토리얼 http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

또는 축소 http://jsfiddle.net/RdcVk/3/