How to remove space between Parent menu and child menu HTML

Kumar AU

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

Products

Products1

Products2

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

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vinodh Narayanan11y ago
Accepted answer
Dear Kumar

Here is the updated code

Use this code
Products

Products1

Products2
It works perfect "Please mark if accepted as answer"

Regards
Vinodh.N(SharePoint developer/Administrator)
Vinodh Narayanan11y ago
Dear Kumar

Your most welcome.. all the best

Regards
Vinodh.N(SharePoint developer/Administrator)
Kumar AU11y ago
Hello Vinodh, Thank you so much for your help, Yes My issue is resolved. you have saved my lot of time, Once again Thank you Vinod.
Kumar AU11y ago
Dear Manas, Thanks for your response, however my issue is still persist, If I remove top:50px, Parent menu will move in different place, Can I have your email Id please, I can send you image
Manas Mohapatra11y ago
Please remove yellow marked code from your CSS code:

#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#8B0F2E;
top: 51px;
left: 2px;
}