Vertical navigation with sub menus with image up and down links for each level with active link highlight when on selected page

Vertical navigation with sub menus with image up and down links for each
level with active link highlight when on selected page

I have the following css vertical navigation menu I have done. There are
up and down images for the parent category 30px high for rollover and
separate up and down images for the second and third levels of the menu
rollover.
For each level, there is a different type of up and down images if there
is no continuing category.
It works OK except for 3 areas that I have been struggling with for days
now and can't seem to see where I have gone wrong.
The first is that the text for each level gets smaller and smaller for
some reason and the second is that at the third level, all the images
shown the up and down images as if there it a continuing category, and
last but not least, when a category is selected in the first, second or
third category, I can't seem to find a way to keep those links highlighted
to show the user that they are in that area.
I hope someone is able to figure this out as I have been going crazy for
days now. Thanks in advance.
Please find the current code below:
The HTML:
<div id="nav">
<ul class="menu">
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-menu">
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-menu">
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-sub-menu">
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-sub-menu">
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-menu">
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-sub-menu">
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-sub-menu">
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-menu">
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-sub-menu">
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
<li>
<a href="/" title="">Home</a>
<ul class="sub-sub-menu">
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
</ul>
</li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
<li><a href="/" title="">Home</a></li>
</ul>
</div>
The CSS:
#nav {
font-family: MyriadWebProBold, sans-serif, arial;
float:left;
width:200px;
z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
display:block;
width:200px;
margin:0;
padding:0;
list-style-type: none;
}
#nav ul.menu > li {
float: left;
display:block;
width:200px;
height:30px;
font-size:0.9em;
line-height:2.2em;
margin-bottom:1px;
}
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
float: left;
display:block;
width:200px;
height:25px;
font-size:0.7em;
line-height:2.2em;
margin-bottom:3px;
}
#nav li a {
display:block;
width:200px;
color:#FFF;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
list-style-type:none;
}
#nav ul.menu > li > a {
background: transparent url('../../test/blue-30-arrow.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.menu > li > a:only-child {
background: transparent url('../../test/blue-30-block.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.menu > li:hover > a {
background: transparent url('../../test/orange-30-arrow.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.menu > li:hover > a:only-child {
background: transparent url('../../test/orange-30-block.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../test/blue-25-arrow.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li > a:only-child, #nav ul.sub-sub-menu > li>
a:only-child {
background: transparent url('../../test/blue-25-block.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li:hover > a, #nav ul.sub-sub-menu > li:hover > a {
background: transparent url('../../test/orange-25-arrow.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu >
li:hover > a:only-child {
background: transparent url('../../test/orange-25-block.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav li a img {
vertical-align:top;
margin-right:5px;
padding:0;
float:left;
}
#nav ul.menu ul ul li {
float: none;
list-style-type: none;
}
#nav li > ul {
display: none;
list-style-type: none;
}
#nav li:hover > ul {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:0px;
margin-left:192px;
}
#nav li:hover > ul.sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-40px;
margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-30px;
margin-left:198px;
}