title: creating a hierarchy like menu
body: <p>I'm trying to make a navigation bar with drop down menus for each item, I understand there needs to be visibility and what not in CSS but I'm unsure how to do it. </p>
  
  <p>Just to be clear id want something like</p>
  
  <hr>
  
  <pre><code>Food | Houseware | Toys  
  -----
  Breakfast
  Lunch
  Dinner
  Snack &gt; Orange
          banana
          apple
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;section id="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href=#&gt; Food &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt; Houseware 
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=#&gt; Breakfast &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=#&gt; Lunch &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=#&gt; Dinner &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=#&gt; Snacks &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=#&gt; Toys &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>This is the code I have at the moment and it creates the bar along the top but the "Breakfast dinner lunch snacks" bit I'm guessing needed to be hidden until <code>:hover</code> is used on each particular <code>&lt;li&gt;</code>. I guess my round about question is am I right in putting a list within a list? If so could someone then explain the concept of what to use to make it hidden until hovered over (also if possible to make sure it snaps to the right of the drop down menu as another menu).</p>
  
  <p>Any help would be greatly appreciated.</p>