title: hide submenus on nav
body: <p>I'm trying to create a drop-down menu.  I had it working for a minute.<br>
  My code is as follows:</p>
  
  <pre><code>&lt;nav id="nav"&gt;
  &lt;ul&gt;
     &lt;li class="subNav"&gt;&lt;a href="somePage1.php"&gt;Some Page1&lt;/a&gt;
       &lt;ul&gt;
           &lt;li&gt;&lt;a href="relatedPage1"&gt;Related Page1&lt;/a&gt;&lt;li&gt;
           &lt;li&gt;&lt;a href="relatedPage2"&gt;Related Page2&lt;/a&gt;&lt;li&gt;
       &lt;/ul&gt;
     &lt;li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My CSS is as follows:</p>
  
  <pre><code>#nav li.subNav ul{
  display: none;
   }
  
  #nav li.subNav:hover ul{
  display: block;
   }
  </code></pre>
  
  <p>I have three CSS files that relate to this page.  One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css.  The tag &lt;#nav li.subNav:hover ul> show up in customFile.css, and &lt;#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.</p>
  
  <p>There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden.  I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag). </p>
  
  <p>I also noticed that the height and width have changed on my parent li.  I understand it expanding to accommodate the list items, but the increased height seems a little odd.</p>