hide submenus on nav

Question

I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:

<nav id="nav">
<ul>
   <li class="subNav"><a href="somePage1.php">Some Page1</a>
     <ul>
         <li><a href="relatedPage1">Related Page1</a><li>
         <li><a href="relatedPage2">Related Page2</a><li>
     </ul>
   <li>
</ul>
</nav>

My CSS is as follows:

#nav li.subNav ul{
display: none;
 }

#nav li.subNav:hover ul{
display: block;
 }

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 <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.

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).

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.

Answer 1

Here's my solution to the above problem

 #nav li.subNav:hover ul li {
      visibility: visible;
      width:  171px;
      padding: 0;
      cursor: pointer;
      float: none !important;
      display: block !important;
  }