CSS菜单 - 下拉不起作用

Question

嗨，我有一个纯粹的CSS菜单，但我无法弄清楚如何将它变成一个下拉菜单。下面的这个菜单很好地作为水平条目工作，但是当我尝试添加一个下拉菜单时，它并没有出现，也没有工作。

有人可以建议我错过了什么使这项工作？

CSS

#container { 
    display: inline-block; 
    padding: 5px; 
    margin: 10px; 
    background: rgba(0,0,0,0.1); 
    position: relative; 

    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 

    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.4), 0px 1px 1px 0px rgba(255,255,255,.1); 
    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.4), 0px 1px 1px 0px rgba(255,255,255,.1); 
    box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.4), 0px 1px 1px 0px rgba(255,255,255,.1); 

    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 

#container ul { 
    padding: 0; 
    height: 40px; 
    margin: 0; 
    list-style: none; 
    overflow: hidden; 

    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.2), 0px 1px 2px 0px rgba(0,0,0,0.5); 
    -moz-box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.2), 0px 1px 2px 0px rgba(0,0,0,0.5); 
    box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.2), 0px 1px 2px 0px rgba(0,0,0,0.5); 

    background: #5c6063; 
    background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3))); 
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); 
    background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); 
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); 
    background-image: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4d000000',GradientType=0); 

    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
} 

#container ul li { 
    background: rgba(255,255,255,0.0); 
    float: left; 
    text-align: center; 
    border-right: 1px solid #666; 
    border-left: 1px solid #444; 

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 

    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
} 


#container ul li a{ 
    text-decoration: none; 
    font: 11px/41px Arial, sans-serif; 
    color: #ddd; 
    text-transform: uppercase; 
    text-shadow: 0px 1px rgba(0,0,0,0.5); 
    padding: 35px; 

} 

#container ul li:active { 
    background: rgba(0,0,0,0.08); 
} 

#container ul li:first-child { 
    border-left: none; 

    -webkit-border-radius: 100px 0 0 100px; 
    -moz-border-radius: 100px 0 0 100px; 
    border-radius: 100px 0 0 100px; 
} 

#container ul li:last-child { 
    border-right: none; 

    -webkit-border-radius: 0 100px 100px 0; 
    -moz-border-radius: 0 100px 100px 0; 
    border-radius: 0 100px 100px 0; 
} 


/* 

TEST TEST TEST TEST 

*/ 


#container ul li:hover { 
    background: rgba(255,255,255,0.08); 
} 

#container li:hover ul 
{ 
    display: block; 
    position: absolute; 
} 

#container li:hover li 
{ 
    float: none; 
    font-size: 11px; 
} 

#container li:hover a 
{ 
    background: #617F8A; 
} 

#container li:hover li a:hover 
{ 
    background: #95A9B1; 
} 

HTML

<center> 
<div id="container"> 
    <ul> 
     <li><a href="index.php">Main</a></li> 
     <li><a href="forgot.php">Forgotten Password</a></li> 
     <li><a href="about.php">About</a></li> 
     <li><a href="privacy.php">Privacy</a></li> 
     <li><a href="terms.php">Terms</a></li> 
     <li><a href="#">Tutorials</a> 
      <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 
</center> 

fiddle

Answer 1

ul 
{ 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

ul li 
{ 
    display: block; 
    position: relative; 
    float: left; 
} 

li ul 
{ 
    display: none; 
} 

ul li a 
{ 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #2C5463; 
    margin-left: 1px; 
    white-space: nowrap; 
} 

ul li a:hover 
{ 
    background: #617F8A; 
} 
li:hover ul 
{ 
    display: block; 
    position: absolute; 
} 

li:hover li 
{ 
    float: none; 
    font-size: 11px; 
} 

li:hover a 
{ 
    background: #617F8A; 
} 

li:hover li a:hover 
{ 
    background: #95A9B1; 
}