Javascript-форум - Помогите с меню!плиз!

У меня в сайте должно быть меню. Значит оно идет сверху, потом идет контент, который естественно меняется при смене страницы сайта, и нижнее меню.

Каждый пункт меню должен плавно подчеркиваться при наведении указателя мыши. С верхним все понятно,получилось,а как вот сделать нижнее меню...У меня нет идей потому что слаб в Джаве. Получается у меня только так чтобы было подчеркивание сразу одновременно сверху и снизу,а нада так чтобы подчеркивалось только тот пункт на который наведен указатель.

Вот код который я использую:

CSS:
.menu{margin:0 0 0 0px; position:relative;padding-left:0px;padding-bottom:20px;display:inline;}
.lavaLampBottomStyle {
position: relative;
height: 35px;
width: 629px;
background-color: white;
padding: 0px;
margin: 0px 0;
overflow: hidden;
border: 0px solid gray;
background:#000000;
}
.lavaLampBottomStyle li {
float: left;
list-style: none;
}
.lavaLampBottomStyle li.back {
border-bottom: 3px solid #ff0000;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}
.lavaLampBottomStyle li a {
background:#000000;
text-decoration: none;
color:#000;
outline: none;
text-align: center;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 0px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border: none;
}

HTML:
<div class="block">
<div class="menu">
<ul class="lavaLampBottomStyle" id="1">
<li><a href="#"><img src="images/b_comp.jpg"></a></li>
<li><a href="#"><img src="images/b_events.jpg"></a></li>
<li><a href="#"><img src="images/b_brand.jpg"></a></li>
<li><a href="#"><img src="images/b_cater.jpg"></a></li>
</ul>
</div>
<table border="0" width="620" style="margin-top:20px;margin-bottom:20px;margin-left:20px;"><tr>
<td><p style="margin-right:20px;font-size:10pt;line-height:1.7;">
Event</p>
<UL><li>-помогает запускать новые бренды
</li>
<li>-поддерживает интерес к уже известным брендам</li>
<li>-является финансово-эффективной альтернативой традиционной рекламе</li>
<li>-дает наилучшие результаты</li></UL>
<p style="margin-right:20px;font-size:10pt;line-height:1.7;">Event является одним из наиболее выгодных креативных способов активации спроса на бренд.
Креатив сам по себе бессмысленнен, он начинает работать только при четко выдержанной коммуникации. Создавая коммуникацию, мы стараемся придумать не только уникальную идею, но и отследить насколько она решает ВАШИ задачи.</p>
</p>
</td></tr></table>
<table border="0" style="margin-bottom:20px;"><tr>
<td>&nbsp</td>
<td><p style="font-size:10pt;line-height:1.7;">Мы придумываем с удовольствием!<br>
P.S. команда компании M&MS </p></td>
<td><img src="images/rosp.jpg"></td>
</tr></table>
<div class="menu" style="padding-top:20px;">
<ul class="lavaLampBottomStyle" id="2">
<li><a href="#"><img src="images/b_decor.jpg"/></a>
<li><a href="#"><img src="images/b_corpor.jpg"/></a>
<li><a href="#"><img src="images/b_activ.jpg"/></a>
<li><a href="#"><img src="images/b_slide.jpg"/></a>
</ul>
</div>
</div>

JS:
<script type="text/javascript">
$(function() {
$("#1,#2").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>