I need to link text in menu, but am having trouble getting the borders (padding) to stay the same. I want the background to change to white and the text color to change to blue, but everything else stay the same.

Here is abbreviated chunk of menu:

<div id="menu">
<ul>
<h1>PRODUCTS &amp; SERVICES</h1>
<li>
<h2><a href="acrylics.asp>Acrylics &amp; Plastics</a></h2>
<ul class="second">
<li><a href="/Products/lisaplex.asp">Lisaplex</a></li>
<li><a href="/Products/Mirroflex.asp">MirroFlex</a></li>
<li><a href="/Products/OctoArt.asp">OctoArt</a></li>
<li><a href="/products/veritas.asp">Veritas</a></li>
</ul>
</li>
<li>
<h2><a href="laminates.asp">Laminates, Metals &amp; Veneers</a></h2>
<ul class="second">
<li><a href="/products/chemetal.asp">Chemetal</a></li>
<li><a href="/products/laminasions.asp">Laminasions</a></li>
<li> <a href="/products/Octolam.asp">OctoLam</a>
<ul class="third">
<li><a href="/products/octoperf.asp">Octoperf</a></li>
<li><a href="/products/octolux.asp">Octolux</a></li>
<li><a href="/products/octoweave.asp">OctoWeave</a></li>
<li><a href="/products/wellboard.asp">Wellboard</a></li>
</ul>
</li>
<li><a href="/products/numetal.asp">NuMetal</a></li>
<li><a href="/products/Treefrog.asp">Treefrog</a></li>
<li><a href="/products/ventec.asp">Ventec</a></li>
</ul>
</li>
</ul>
</div>

Here is code for menu on style sheet
#menu {
width: 16em;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu li {
position: relative;
}

#menu h1 {
font: bold 14px verdana, arial, helvetica, sans-serif;
color: #fff;
text-align: center;
display: block;
margin: 0;
padding: 5px 3px;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 5px 3px;
}

#menu h2 {
color: #fff;
background: #369;
text-transform: uppercase;
}

#menu a {
color: #000;
background: #AC9C65;
text-decoration: none;
}

#menu a:hover {
color: #369;
background: #fff;
}

#menu ul.second, #menu ul.third {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

div#menu ul li ul.second {
display: none;
}

div#menu ul.second li ul.third {
display: none;
}

div#menu ul li:hover ul.second {
display: block;
}

div#menu ul.second li:hover ul.third {
display: block;
}