我如何得到這個下拉菜單實際上「下拉」

Question

我做的這個導航欄在某些按鈕上有下拉菜單。我想使它所以當激活下拉菜單按鈕被上空盤旋，在下拉菜單之類的下落到這種地方：http://designmodo.com/demo/css3dropdownmenu/

這裏的鏈接到我的代碼：http://jsfiddle.net/w5Ce7/2/

這裏的只是貼在這裏的代碼：

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; 
}