在某些项目上设置此导航菜单下拉菜单？

Question

试图找出如何让我的导航栏下拉某些项目，查看其他代码，但结果很奇怪，完全没有风格。

<div id="navbar"> 
      <ul> 
        <li>Sub1</li> 
        <li>Sub2</li> 
      </ul> 
    </div>

我的CSS看起来像这样：

 #navbar ul { 
    margin: 0; 
    padding: 5px; 
    list-style-type: none; 
    text-align: center; 
    background-color: #BDBDBD; 
    } 

#navbar ul li {  
    display: inline; 
    } 

#navbar ul li a { 
margin: 0 15px;
    text-decoration: none; 
    padding: .2em 1em; 
    color: #fff; 
    background-color: #BDBDBD; 
    } 

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

现在我需要做些什么才能使sub1有2个额外的项目在悬停时下拉？

提前致谢。