드롭 다운 메뉴에서 CSS 드롭 다운 메뉴 변환

Question

드롭 다운 메뉴를 드롭 다운 메뉴로 변환하고 싶습니다. 인터넷에서 정보를 검색했지만 도움이되지 않았습니다.

내 CSS 코드 :

#nav 
{ 
margin: 0px; 
padding: 0px; 
position: absolute; 
top: 18px; 
display: block; 
left: 313px; 
} 

#nav > li 
{ 
list-style-type:none; 
float:left; 
display:block; 
margin:0px 10px; 
position:relative; 
padding:10px; 
width:100px; 
} 

#nav > li:hover ul 
{ 
display:block; 
} 

#nav > li:hover 
{ 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
} 

#nav li ul 
{ 
margin:0px; 
padding:0px; 
display:none; 
} 

#nav li ul li 
{ 
list-style-type:none; 
margin:10px 0 0 0; 
} 

#nav li ul li a 
{ 
display:block; 
padding:5px 10px; 
color:#bdb49f; 
text-decoration:none; 
} 

#nav li ul li:hover a 
{ 
color:#b15815; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
} 

#nav li span 
{ 
cursor:pointer; 
margin:0px 10px; 
font-weight:bold; 
} 

Answer 1

이 솔루션은 아이가 절대 위치 UL 만들기에있다. http://jsfiddle.net/3NmRP/

"#nav"의 "여백 정상"여기 예를 위해서, 당신이 그것을 제거 할 수 있습니다 : 여기

은 작업 예입니다. [PURE CSS 상향 UP/열리고 드롭 다운 메뉴]의

#nav{ 
    margin: 0px; padding: 0px; position: absolute; top: 18px; display: block; left: 313px; 
} 

#nav > li { 
    list-style-type:none; 
    float:left; display:block; 
    margin:0px 10px; 
    position:relative; 
    padding:10px; 
    width:100px; 
} 
#nav > li ul { 
    position:absolute; 
    bottom: 100%; 
} 
#nav li:hover > ul { 
    display:block; 
} 
#nav > li:hover{ 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
} 
#nav li ul{ 
    margin:0px; 
    padding:0px; 
    display:none; 
} 
#nav li ul li{ 
    list-style-type:none; 
    margin:10px 0 0 0; 
} 
#nav li ul li a{ 
    display:block; 
    padding:5px 10px; 
    color:#bdb49f; 
    text-decoration:none; 
} 
#nav li ul li:hover a { 
    color:#b15815; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
} 
#nav li span{ 
    cursor:pointer; 
    margin:0px 10px; 
    font-weight:bold; 
} 

#nav { 
    margin-top: 100px; 
}