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 -->
================================================================