To reduce white space between drop down menus

Question

1.00/5 (1 vote)

See more:

Hi,

I have used CSS for creating drop down menu.
For menus I have used images(they are not simple text).
When i move the mouse over the main menu, i get lot of space between the main menu and each sub menu.
How can i reduce those spaces from each image.

Eg:
Main Menu

Menu1

Menu2

Menu3

I am getting output like this.
But i want the output to be:
Main Menu
Menu1
Menu2
Menu3

Posted 26-Aug-13 4:19am

archies_gall

Add a Solution

Comments

Gregory Gadow 26-Aug-13 10:38am

The problem is almost certainly one of padding. I cannot tell, though, without seeing your HTML and CSS.

archies_gall 26-Aug-13 11:25am

Html flie has:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="../CSS/myfile.css">

</head><body>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr valign="top"> <td colspan="8">

<img id="myimg" src="../logos/Mainlogo.bmp"> </td></tr>

<tr bgcolor="red" style="height:15px;"> <td colspan="8">

<div id="font2"> <marquee>Some text</marquee>

</div> </td></tr><tr> <td align="center">

<img class="imgCustom" src="../Images/history.png">

</td> <td align="center">

<img class="imgCustom" src="../Images/Geo.png">

</td> <td align="center">

<img class="imgCustom" src="../Images/co.png">

</td> <td align="center">

<img class="imgCustom" src="../Images/math.png">

</td> <td align="center">

<img class="imgCustom" src="../Images/sub.png">

</td> <td align="center">

<img class="imgCustom" src="../Images/Test.png">

</td> <td align="center">

<img class="imgCustom" src="../Images/awards.png">

</td> <td align="center">

<img class="imgCustom" src="../Images/Papers.png">

</td></tr></table>

<table width="100%" border="0" height="100%">

<tr cellspacing="0px" cellpadding="0px">

<td align="center" width="20%"> <ul id="menu"> <li>

<img class="imgCustom" src="../Images1/photo.png">

<ul class="sub-menu"> <li>

<img class="imgCustom" src="../Images/Topper.png">

</li> <li>

<img class="imgCustom" src="../Images/Merit.png">

</li> <li>

<img class="imgCustom" src="../Images/photo.png">

</li> </ul> </li> </ul>

 <img class="imgCustom" src="../Images1/event.png">

 <img class="imgCustom" src="../Images1/upcomingevent.png">

 <img class="imgCustom" src="../Images/Blue.png"> 

<marquee direction="up" scrolldelay="120">Some text</marquee>

</td> <td width="60%" align="center">

<img src="../Images/Blue.png" height="50px" width="50px">

 

<img src="../Images/welcome.png" align="bottom" height="50%" width="50%">

 

</td> <td width="20%" align="center">

 

 

<img class="imgCustom" src="../Images/Blue.png"> 

<marquee direction="up" scrolldelay="120">Some text</marquee>

</td></tr></table></body></html>

archies_gall 26-Aug-13 11:26am

Css file:
.imgCustom
{
width:110px;
height:70px;
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

.imgCustom1
{
width:90px;
height:50px;
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

tr
{
cellpadding:0px;
cellspacing:0px;
}

a img {
border:none;
}

#header {
position: fixed;
margin:0;
padding:0;
height:70px;
width:100%;
}

html {
overflow:hidden;
}

body{
background-color:rgb(204,252,215);
}

iframe
{
frameborder:none !important;
height:300px;
width: 100%;
border:none;

}

iframe[seamless]{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}

#tdColor
{
background-color:rgb(79,129,189);
}

#font1
{
position:fixed;
right: 0;
top: 50%;
overflow:hidden;
}

#font2
{
font-family: serif;
font-size: 20px;
color: white;
}

#myimg
{
width:100%;
height:80px;
position:relative;
}

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin: 0;
display: inline;

}

ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
list-style: none;
line-height: 1;

}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
padding: 0px;
display:inline-block;
}

/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 0;
width: 30px;
}
ul#menu li:hover ul.sub-menu {
display:block;
position: relative;
width: 40px;
height:30px;

}

archies_gall 27-Aug-13 4:28am

Any clue on this??

Paulo Augusto Kunzel 23-Oct-13 5:56am

on CSS do:
*{
margin: 0px;
border: 0px;
padding: 0px;
}

it will mess everything, but if the problem gets fixed on the menu, then you know one of these.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)