如何在此代码中实现下拉菜单？

Question

我如何使下拉菜单成为此代码？我之前确实尝试过一些东西，但是在实现下拉菜单后，我无法在栏上添加内容。

欢呼声

<div id="menubar">
    <ul id="menu">


   <li><a href="example1.html">Example1</a></li>
       <li><a href="example2.html">Example2</a></li>
       <li class="selected"><a href="example3.html">example 3</a></li>
      <li><a href="example.html">Example 4</a></li>
      <li><a href="example.html">Example 5</a></li>
         <li><a href="example.html">Example6</a></li>
    </ul>
  </div>

Style.css

  #menubar
{ width: 898px;
  height: 52px;
  padding: 0;
  background: #000;} 

ul#menu, ul#menu li
{ float: left;
  margin: 0; 
  padding: 0;}

ul#menu li
{ list-style: none;}

ul#menu li a
{ letter-spacing: 0.1em;
  font: normal 100% arial, sans-serif;
  display: block; 
  float: left; 
  height: 17px;
  margin: 10px 0 0 10px;
  padding: 9px 26px 6px 26px;
  text-align: center;
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;} 

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
  background: transparent url(transparent_light.png) repeat;}