CSS - Javascript drop down menu - need padding on text

Hi,
I have a drop down menu as below which works OK but i need to add some padding around the text, I have tried adding padding:5px which works OK on the text but it also ads 5 px to the size of the menu boxes which is want.

Thanks advance for your help.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Dropdown Sample</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords"    content="" />

<script type="text/javascript">

// Copyright (C) 2005-2008 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Re-distribute this code or any part of it.
//     Instead, you may link to the homepage of this code:
//     http://www.php-development.ru/javascripts/dropdown.php
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as part of another product.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind.
// You expressly acknowledge and agree that use of this code is at your own risk.


// ***** Popup Control *********************************************************

// ***** at_show_aux *****

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child );

  var top  = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }

  c.style.position   = "absolute";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
  c.style.visibility = "visible";
}

// ***** at_show *****

function at_show()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);
  clearTimeout(c["at_timeout"]);
}

// ***** at_hide *****

function at_hide()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);
}

// ***** at_click *****

function at_click()
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible") at_show_aux(p.id, c.id); else c.style.visibility = "hidden";
  return false;
}

// ***** at_attach *****

// PARAMETERS:
// parent   - id of the parent html element
// child    - id of the child  html element that should be droped down
// showtype - "click" = drop down child html element on mouse click
//            "hover" = drop down child html element on mouse over
// position - "x" = display the child html element to the right
//            "y" = display the child html element below
// cursor   - omit to use default cursor or specify CSS cursor name

function at_attach(parent, child, showtype, position, cursor)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}




</script>

<style type="text/css">

a.main_menu, a.main_menu:visited, div.main_menu
{
      font: bold 12px/14px arial, helvetica, sans-serif;
      display: block;
      height: 35px;
      color: #fff;
      background-color: #003399;
      width: 106px;
      padding-top: 0px;
      padding-left: 0px;
      margin: 1px;
      border-bottom: none;
}

a.sub_menu, a.sub_menu:visited, div.sub_menu
{
      color: #FFFFFF;
      text-decoration: none;
      display: block;
      margin-left: 0px;
      margin-top: 1px;
      padding: 0px;
      height: 35px;
      width: 106px;
      background-color: #FDB813;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      border-bottom: none;
}
a.sub_menu:hover
{
      color: #000000;
      text-decoration: none;
      display: block;
      margin-left: 0px;
      margin-top: 1px;
      padding: 0px;
      height: 35px;
      width: 106px;
      background-color: #FDB813;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      border-bottom: none;
}

</style>

</head>
<body>
<div id="main">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div id="menu_parent1" class="main_menu">Main Menu</div>
        <div id="menu_child1">
        <a class="sub_menu" href="javascript:alert('Item 1');">Item 1</a>
        <a class="sub_menu" href="javascript:alert('Item 2');">Item 2</a>
        <a class="sub_menu" href="javascript:alert('Item 3');">Item 3</a>
        </div>
      </td>
    <td><div id="menu_parent2" class="main_menu">Main Menu</div>
        <div id="menu_child2">
        <a class="sub_menu" href="javascript:alert('Item 1');">Item 1</a>
        <a class="sub_menu" href="javascript:alert('Item 2');">Item 2</a>
        </div>
      </td>
      <td><div id="menu_parent3" class="main_menu">Main Menu</div>
        <div id="menu_child3">
        <a class="sub_menu" href="javascript:alert('Item 1');">Item 1</a>
        <a class="sub_menu" href="javascript:alert('Item 2');">Item 2</a>
        <a class="sub_menu" href="javascript:alert('Item 3');">Item 3</a>
        </div>
      </td>
      <td><div id="menu_parent4" class="main_menu">Main Menu</div>
        <div id="menu_child4">
        <a class="sub_menu" href="javascript:alert('Item 1');">Item 1</a>
        <a class="sub_menu" href="javascript:alert('Item 2');">Item 2</a>
        <a class="sub_menu" href="javascript:alert('Item 3');">Item 3</a>
        </div>
      </td>
      <td><div id="menu_parent5" class="main_menu">Main Menu</div>
        <div id="menu_child5">
        <a class="sub_menu" href="javascript:alert('Item 1');">Item 1</a>
        <a class="sub_menu" href="javascript:alert('Item 2');">Item 2</a>
        <a class="sub_menu" href="javascript:alert('Item 3');">Item 3</a>
        </div>
      </td>
    <td><div id="menu_parent6" class="main_menu">Main Menu</div>
        <div id="menu_child6">
        <a class="sub_menu" href="javascript:alert('Item 1');">Item 1</a>
        <a class="sub_menu" href="javascript:alert('Item 2');">Item 2</a>
        <a class="sub_menu" href="javascript:alert('Item 3');">Item 3</a>
        </div>
      </td>  
       <td><div id="menu_parent7" class="main_menu">Main Menu</div>
        <div id="menu_child7">
        <a class="sub_menu" href="javascript:alert('Item 1');">Item 1</a>
        <a class="sub_menu" href="javascript:alert('Item 2');">Item 2</a>
        <a class="sub_menu" href="javascript:alert('Item 3');">Item 3</a>
        </div>
      </td>
  </tr>
</table>
</div>
<script type="text/javascript">
at_attach("menu_parent1", "menu_child1", "hover", "y", "pointer");
at_attach("menu_parent2", "menu_child2", "hover", "y", "pointer");
at_attach("menu_parent3", "menu_child3", "hover", "y", "pointer");
at_attach("menu_parent4", "menu_child4", "hover", "y", "pointer");
at_attach("menu_parent5", "menu_child5", "hover", "y", "pointer");
at_attach("menu_parent6", "menu_child6", "hover", "y", "pointer");
at_attach("menu_parent7", "menu_child7", "hover", "y", "pointer");
</script>

</body>
</html>
sabecsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

stevengmoreauCommented:
An easy fix for this is to change your 3 css classes
For each of them add the following properties:

text-align:center;
line-height:35px;

0
stevengmoreauCommented:
Re-reading your question: if you want to offset the top and left by 5px, you can use these two properties instead of the above:

text-indent:5px;
line-height:25px;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sabecsAuthor Commented:
Thanks..
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.