How to remove space between Parent menu and child menu HTML

Question

Hi All,

In the below drop down list, sub menus are getting displayed with lots of space, please see the below chart, Please let me know how do I avoid the space between parent Menu and Child menu.

-----------------------------------------------------------

| PARENT1 |

-----------------------------------------------------------

--------

|CHILD1 |

--------

|CHILD2 |

--------

My CSS Code :-

#navMenu {

margin:0;

padding:0;

}

#navMenu {

margin:0;

padding:0;

}

#navMenu ul{

margin:0;

padding:0;

line-height:30px;

z-index:1;

}

#navMenu li{

margin:0;

padding:0;

list-style:none;

float:left;

position:relative;

background:#8B0F2E;

top: 51px;

left: 10px;

}

#navMenu ul li a {

text-align:center;

font-family:"Comic Sans MS",cursive;

text-decoration:none;

height:30px;

width:150px;

display:block;

color:#FFF;

border:0px solid #FFF;

}

#navMenu ul ul

{

position:absolute;

visibility:hidden;

top:32px;

}

#navMenu ul li:hover ul

{

visibility:visible;

}

#navMenu li:hover

{

background:#09F;

}

#navMenu ul li:hover ul li a:hover

{

background:#CCC;

color:#000;

}

#navMenu a:hover

{

color:#000;

}

.clearFloat

{

clear:both;

margin:0;

padding:0;

}

===============================================================

My HTML Code :-

<div id="wrapper">

<div id ="navMenu">

<ul>

<li><a href="#">Products</a>

<ul>

<li><a href="#">Products1</a></li>

<li><a href="#">Products2</a></li>

</ul>

</li> <!-- end main li -->

</ul> <!-- end main ul -->

<br class="clearFloat" />

</div> <!-- end navmenu -->

</div> <!-- End Wrapper -->

================================================================