title: How to make submenu drop down display on hover
body: <p>I can not seem to get this right, trying to make the submenu display on hover of parent list items. It keeps displaying some funky way , is there a standard way to do this? Cant seem to get any code adaptations to work with my code.</p>
  
  <pre><code>&lt;div id="navBar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Artist&lt;/a&gt;
              &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Apprentice&lt;/a&gt;
              &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 3&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Store&lt;/a&gt;
              &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;sub menu item 1&lt;/a&gt;&lt;/li&gt;    
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> /*navigation bar*/
  #navBar {
      width: 100%;
      float: left;
      margin: 0;
      padding: 0;
      background-color: #000000;
      border-bottom: 1px solid #ffffff;
  }
  #navBar ul {
      list-style: none;
      width: 800px;
      margin: 0 auto;
      padding: 0;
  } 
  #navBar li {
       float: left;
      position:relative;
  }
  #navBar li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
      color: #ffffff;
      border-right: 1px solid #ffffff;
      height: 30px;
      font-size: large;
  }
   #navBar li:first-child a {
       border-left: 1px solid #ffffff; 
  }
  #navBar li a:hover {
      color: #000;
      background-color: #9DE4BD;
  }
  #navBar li ul {
      position:absolute;
      left:-9999;
  }
  #navBar li:hover &gt; ul  {
   display: block;
    position: relative;
    left: 0px;
    float: none;
    clear: left;
  }
  </code></pre>