이 드롭 다운 메뉴에서 실제로 "드롭 다운"을 얻는 방법

Question

내가 만든이 탐색 모음에는 특정 버튼에 대한 메뉴가 있습니다. 내가 그렇게 드롭 다운 메뉴를 활성화 버튼을 가리킬 때를 만들고 싶어, 드롭 다운 메뉴는 종류의 같은 장소로 아래로 떨어지면 : http://jsfiddle.net/w5Ce7/2/

은 다음과 같습니다 여기

http://designmodo.com/demo/css3dropdownmenu/ 내 코드에 대한 링크입니다 여기에 붙여 넣은 코드 :

HTML

<div id="container"> 
<div id="navbar"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Questions</a></li> 
<li><a href="#">Classes</a></li> 
<li><a href="#">Designer</a></li> 
<li><a href="#">Flavors</a></li> 
<li><a href="#">Cakes</a> 
<ul> 
<li ><a href="#">Budget Cakes</a></li> 
<li><a href="#">Wedding</a> 
    <ul> 
    <li><a href="#">Wedding 1</a></li> 
    <li><a href="#">Wedding 2</a></li> 
    <li><a href="#">Wedding 3</a></li> 
    <li><a href="#">Wedding 4</a></li> 
    <li><a href="#">Wedding 5</a></li> 
    <li><a href="#">Wedding 6</a></li> 
    </ul> 
</li> 
<li ><a href="#">Cakes to Go</a></li> 
<li ><a href="#">Cake Bonbons</a></li> 
<li ><a href="#">Holiday Cakes</a></li> 
<li ><a href="#">Cakes for Girls</a></li> 
<li ><a href="#">Cakes for Boys</a></li> 
<li ><a href="#">For Her</a></li> 
<li ><a href="#">For Him</a></li> 
<li ><a href="#">Cupcakes</a></li> 
</ul> 
</li> 
<li><a href="#">Events</a> 
<ul>  
<li><a href="#">Beach Wedding</a></li> 
<li><a href="#">Baby Showers</a></li> 
<li><a href="#">Sweet 15-16</a></li> 
</ul> 
</li> 
</ul> 
</div><!--end of navbar--> 

CSS

body { 
margin:0; 
font-family:Georgia, Arial black, Times, serif; 
} 


h2 { 
text-align:center; 
} 

img { 
border:none; 
border:0; 
} 


#topbanner { 
width:100%; 
height:40px; 
background-color:#88C6CC; 
color:#fff; 
text-align:center; 
line-height:40px; 
font-size:36px; 
} 


#container { 
width:1050px; 
height:800px; 
background-color:#B7E6E8; 
margin:auto; 
position:relative; 
border-radius:20px; 
-moz-border-radius:20px; 
-webkit-border-radius:20px; 
-ms-border-radius:20px; 
-o-border-radius:20px; 
margin-top:10px; 
} 



/*Start Navigation Bar*/ 
#navbar ul ul { 
display:none; 
} 

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

#navbar ul { 
background: #efefef; 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
padding: 0 40px; 
border-radius:10px; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
list-style:none; 
position:relative; 
display:inline-table; 
} 



#navbar ul:after { 
content: ""; clear: both; display: block; 
} 

#navbar ul li { 
float:left; 
-webkit-transition:background 0.3s ease-in; 
-moz-transition:background 0.3s ease-in; 
-o-transition:background 0.3s ease-in; 
-ms-transition:background 0.3s ease-in; 
transition:background 0.3s ease-in; 
} 

#navbar ul li:hover { 
background:#4b545f; 
} 


#navbar ul li:hover a { 
color:#fff; 
} 

#navbar ul li a { 
display:block; 
padding:25px 40px; 
color:#757575; 
text-decoration:none; 
} 

#navbar ul ul { 
background: #5f6975; 
border-radius:0px; 
-webkit-border-radius:0px; 
-moz-border-radius:0px; 
padding: 0; 
position:absolute; 
top:100%; 
width:195px; 
z-index:1; 
} 

#navbar ul ul li { 
float:none; 
border-top:1px solid #6b727c; 
border-bottom: 1px solid #575f6a; 
position:relative; 
} 

#navbar ul ul li a { 
padding: 15px 40px; 
color:#fff; 
} 

#navbar ul ul li a:hover { 
background: #4b545f;  
} 

#navbar { 
text-align:center; 

} 

#navbar ul ul ul { 
position:absolute; 
left:100%; 
top:0; 
width:155px; 
} 

Answer 1

여기 있습니다. FIDDLE. 문제는 sub ul을 블록으로 표시하는 것입니다.

#navbar ul li:hover > ul { 
    opacity:1; 
    height:auto !Important; 
} 
#navbar ul li:hover > ul > li { 
    height:50px !important; 
    opacity:1; 
} 
#navbar ul { 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
    padding: 0 40px; 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    list-style:none; 
    position:relative; 
    display:inline-table; 
} 
#navbar ul:after { 
    content:""; 
    clear: both; 
    display: block; 
} 
#navbar ul li { 
    float:left; 
    -webkit-transition:background 0.3s ease-in; 
    -moz-transition:background 0.3s ease-in; 
    -o-transition:background 0.3s ease-in; 
    -ms-transition:background 0.3s ease-in; 
    transition:background 0.3s ease-in; 
    position:relative; 
} 
#navbar ul li:hover { 
    background:#4b545f; 
} 
#navbar ul li:hover a { 
    color:#fff; 
} 
#navbar ul li a { 
    display:block; 
    padding:25px 40px; 
    color:#757575; 
    text-decoration:none; 
} 
#navbar ul ul { 
    background: #5f6975; 
    border-radius:0px; 
    -webkit-border-radius:0px; 
    -moz-border-radius:0px; 
    padding: 0; 
    position:absolute; 
    top:100%; 
    left:0px; 
    width:195px; 
    z-index:1; 
    -webkit-transition:all 0.4s ease-in-out; 
    transition:all 0.4s ease-in-out; 
    opacity:0; 
    height:0px; 
} 
#navbar ul ul li { 
    float:none; 
    border-top:1px solid #6b727c; 
    border-bottom: 1px solid #575f6a; 
    position:relative; 
    height:0px; 
    -webkit-transition:all 0.4s ease-in-out; 
    transition:all 0.4s ease-in-out; 
    opacity:0; 
} 
#navbar ul ul li a { 
    padding: 15px 40px; 
    color:#fff; 
} 
#navbar ul ul li a:hover { 
    background: #4b545f; 
} 
#navbar { 
    text-align:center; 
} 
#navbar ul ul ul { 
    position:absolute; 
    left:100%; 
    top:0; 
    width:155px; 
}