title: HTML Dropdown Menu not working
body: <p>I am working on this website <a href="http://www.aoaluminiumproducts.com.au/" rel="nofollow">http://www.aoaluminiumproducts.com.au/</a>, and i cant seem to get the drop-down working. I would like the "Services" tab to be a drop-down item with the sub nav 1 links etc (I will change the names). </p>
  
  <p><strong>HTML/CSS SOURCE</strong></p>
  
  <pre><code>&lt;div id="menubar"&gt;
  &lt;ul id="menu"&gt;&lt;!-- put class="selected" in the li tag for the selected page - to highlight which page you're on --&gt;
  &lt;li class="selected"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
  &lt;div class="c1"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="services.html"&gt;Our Services&lt;/a&gt;&lt;/li&gt;
  
  &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 1"&gt;Sub Nav Link 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 2"&gt;Sub Nav Link 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 3"&gt;Sub Nav Link 3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" title="Sub Nav Link 4"&gt;Sub Nav Link 4&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;  
  
  
  &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  html
  { height: 100%;}
  
  *
  { margin: 0;
    padding: 0;}
  
  body
  { font: 0.8em/1.5 "arial",sans-serif; 
    color: #303030;
    background: #990000;
    }
  
  p
  { padding: 0 0 20px 0;
    line-height: 1.7em;}
  
  img
  { border: 0;}
  
  h1, h2, h3, h4, h5, h6 
  { font: normal 175% 'century gothic', arial, sans-serif;
    color: #43423F;
    margin: 0 0 15px 0;
    padding: 15px 0 5px 0;}
  
  h2
  { font: normal 200% 'century gothic', arial, sans-serif;
    color: #1293EE;}
  
  h4, h5, h6
  { margin: 0;
    padding: 0 0 5px 0;
    font: normal 120% arial, sans-serif;
    color: #1293EE;}
  
  h5, h6
  { font: italic 95% arial, sans-serif;
    padding: 0 0 15px 0;
    color: #000;}
  
  h6
  { color: #362C20;}
  
  a, a:hover
  { outline: none;
    text-decoration: underline;
    color: #CC0000;}
  
  a:hover
  { text-decoration: none;}
  
  .left
  { float: left;
    width: auto;
    margin-right: 10px;}
  
  .right
  { float: right; 
    width: auto;
    margin-left: 10px;}
  
  .center
  { display: block;
    text-align: center;
    margin: 20px auto;}
  
  blockquote
  { margin: 20px 0; 
    padding: 10px 20px 0 20px;
    border: 1px solid #E5E5DB;
    background: #FFF;}
  
  ul
  { margin: 2px 0 22px 17px;}
  
  ul li
  { list-style-type: circle;
    margin: 0 0 6px 0; 
    padding: 0 0 4px 5px;}
  
  ol
  { margin: 8px 0 22px 20px;}
  
  ol li
  { margin: 0 0 11px 0;}
  
  #main, #logo, #menubar, #site_content, #footer
  { margin-left: auto; 
    margin-right: auto;}
  
  #header
  { background: #990000;
    height: 240px;}
  
  #logo
  { width: 810px;
    position: relative;
    height: 120px;
    background: #150517; url(logo.png) no-repeat;}
  
  #logo #logo_text 
  { position: center; 
    top: 20px;
    left: 0;}
  
  #logo h1, #logo h2
  { font: normal 300% 'century gothic', arial, sans-serif;
    border-bottom: 0;
    text-transform: none;
    margin: 0;}
  
  #logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
  { padding: 22px 0 0 0;
    color: #FFF;
    letter-spacing: 0.1em;
    text-decoration: none;}
  
  #logo_text h1 a .logo_colour
  { color: #FAF700;}
  
  #logo_text h2
  { font-size: 100%;
    padding: 4px 0 0 0;
    color: #DDD;}
  
  #menubar
  { width: 877px;
    height: 72px;
    padding: 0;
    background: #150517; url(menu.png) repeat-x;
    } 
  
  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% 'lucida sans unicode', arial, sans-serif;
    display: block; 
    float: left; 
    height: 37px;
    padding: 29px 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: #451C1B url(menu_select.png) repeat-x;}
  
  #site_content
  { width: 900px;
    overflow: hidden;
    margin: 0 auto 0 auto;
    padding: 20px 24px 20px 37px;
    background: #DCDCDC;} 
  
  .sidebar
  { float: right;
    width: 200px;
    padding: 0 15px 20px 15px;}
  
  .sidebar ul
  { width: 178px; 
    padding: 4px 0 0 0; 
    margin: 4px 0 30px 0;}
  
  .sidebar li
  { list-style: none; 
    padding: 0 0 7px 0; }
  
  .sidebar li a, .sidebar li a:hover
  { padding: 0 0 0 40px;
    display: block;
    background: transparent url(link.png) no-repeat left center;} 
  
  .sidebar li a.selected
  { color: #444;
    text-decoration: none;} 
  
  #content
  { text-align: left;
    width: 595px;
    padding: 0;}
  
  #content ul
  { margin: 2px 0 22px 0px;}
  
  #content ul li
  { list-style-type: none;
    background: url(bullet.png) no-repeat;
    margin: 0 0 6px 0; 
    padding: 0 0 4px 25px;
    line-height: 1.5em;}
  
  #footer
  { width: 878px;
    font: normal 100% 'lucida sans unicode', arial, sans-serif;
    height: 33px;
    padding: 24px 0 5px 0;
    text-align: center; 
    background: #000000;
    color: #b1b1b1;
    text-transform: uppercase;
    letter-spacing: 0.1em;}
  
  #footer a
  { color: #FFF;
    text-decoration: none;}
  
  #footer a:hover
  { color: #FFF;
    text-decoration: underline;}
  
  .search
  { color: #5D5D5D; 
    border: 1px solid #BBB; 
    width: 134px; 
    padding: 4px; 
    font: 100% arial, sans-serif;}
  
  #colours
  { height: 0px;
    text-align: right;
    padding: 66px 16px 0px 300px;}
  
  .form_settings
  { margin: 15px 0 0 0;}
  
  .form_settings p
  { padding: 0 0 4px 0;}
  
  .form_settings span
  { float: left; 
    width: 200px; 
    text-align: left;}
  
  .form_settings input, .form_settings textarea
  { padding: 5px; 
    width: 299px; 
    font: 100% arial; 
    border: 1px solid #E5E5DB; 
    background: #FFF; 
    color: #47433F;}
  
  .form_settings .submit
  { font: 100% arial; 
    border: 1px solid; 
    width: 99px; 
    margin: 0 0 0 212px; 
    height: 33px;
    padding: 2px 0 3px 0;
    cursor: pointer; 
    background: #7D0F0F; 
    color: #FFF;}
  
  .form_settings textarea, .form_settings select
  { font: 100% arial; 
    width: 299px;}
  
  .form_settings select
  { width: 310px;}
  
  .form_settings .checkbox
  { margin: 4px 0; 
    padding: 0; 
    width: 14px;
    border: 0;
    background: none;}
  
  .separator
  { width: 100%;
    height: 0;
    border-top: 1px solid #D9D5CF;
    border-bottom: 1px solid #FFF;
    margin: 0 0 20px 0;}
  
  table
  { margin: 10px 0 30px 0;}
  
  table tr th, table tr td
  { background: #DCDCDC;
    color: #DCDCDC;
    padding: 7px 4px;
    text-align: left;}
  
  table tr td
  { background: #DCDCDC;
    color: #DCDCDC;
  }
  
  #testimonials{
      width: 133px;
      padding: 45px 45px 35px;
      background:url('../img/quotes.png') no-repeat 20px 20px rgba(178,178,169,0.2);
      min-height:90px;
  
      -moz-border-radius:12px;
      -webkit-border-radius:12px;
      border-radius:12px;
  }
  #testimonials ul{ list-style:none;}
  #testimonials p.text{ font-size:11px;}
  
  #testimonials p.author{
      color: #878787;
      font-size: 16px;
      font-style: italic;
      text-align: left;
  
  }
  
  #testimonials p.author a,
  #testimonials p.author a:visited{
      color:#6aa42a;
  }
  </code></pre>