CCS Question for Experts

I know this is for experts as I am not one and I don't know what I can do to get this done!!

Below there are some CSS Elements and the HTML that uses the CSS.

What you will notice is that the A:hover has a different height to A. It looks a bit strange as the lower elements jump on hover of the others: so I want to change it a little.

Basically I want the 'onload' total height to be 15 * 4 + 35 + padding with the lower one to be 35 unless another is hovered.

So - to be loquacious:
The opening heights would be:
15
15
15
15
35
When you hover over any of the top four (in this case the second one) they would become:
15
35 - a:hover here making it 35
15
15
15 - This has changed as a result of the a:hover above
mouseOut on any of the top four (in this case the second one) would mean it's:
15
15 - back to 15
15
15
35 - back to 35
Hovering over the bottom one would keep it as:
15
15
15
15
35

BUT - How do I make it happen?

/* LEFT HAND SIDE */
#div_bodyleft
{
padding-left: 5px;
padding-top: 10px;
padding-right: 2px;
float: left;
height:inherit;
width: 125px;
/*border: solid 1px red;*/
}
.hoznav_design, .hoznav_support, .hoznav_implementation, .hoznav_promotions, .hoznav_expansion
{
display: block;
padding-bottom: 2px;
font-weight: bold;
font-size: 10pt;
float: inherit;
text-align:center;
background-color:#000066;
}
.hoznav_design a, .hoznav_support a, .hoznav_implementation a, .hoznav_promotions a, .hoznav_expansion A
{
border-top: silver thin outset;
border-bottom: silver thin outset;
border-left: silver thin outset;
border-right: silver thin outset;
color: white;
width: 100px;
height: 15px;
text-decoration: none;
}
.hoznav_design A:hover, .hoznav_support A:hover, .hoznav_implementation A:hover, .hoznav_promotions A:hover, .hoznav_expansion A:hover

{
color: silver;
height: 35px;
}

***************

<div id="div_bodyleft" title="**">
<div class="hoznav_design"><a href="design/" title="">Design</a></div>
<div class="hoznav_implementation"><a href="implementation/" title="**">Implementation</a></div>
<div class="hoznav_promotions"><a href="promotions/" title="**">Promotion</a></div>
<div class="hoznav_support"><a href="support/" title="**">Support</a></div>
<div class="hoznav_expansion"><a href="expansion/" title="**">Expansion</a></div>
<br/>
</div>

 

I am at college at the moment,and im no expert, but I will take a look when I get home (need to do assignments lol)

p.s. Posting in the CSS section might get a better responce, as some people go straight to it

 

I just noticed the section (I'm usually in the SEO area...

Mods - can you move this please?