Меню: не представляю как подступиться

[Hippy]

Нужно сверстать вот такое меню:

Как видно на картинке каждый элемент имеет синий "буллит", который накладывается на нижеследующий, а буллит активного элемента перекрывает остальные. Причем по вертикали буллит должен быть резиновым.

Ну никак у меня не получается. может кто подскажет? очень нужно..

[Hippy]

пока только вот так:

css:

<style type="text/css">
body
{
margin:0px;
}
#menu
{ 
 background-color:#e1d7cd;
 color:#1f5376;
 font-size:11px;
 font-weight:bold; 
 font-family:Tahoma;
 padding:5px;
 width:125px;
 height:25px;
 text-decoration:none;
 background-image:url(bullet.jpg);
 background-position:right;
 background-repeat:no-repeat;


}


img {border: 0px; margin-bottom:2px; margin-right:5px;}

#menu:hover
{ background-color:#fff;
 border-bottom: #FFCC33 solid 4px;
 height:30px;
 background-image:url(big-bullet.jpg);
 }
</style>

html

<a href="#"><div id="menu"><img src="list.gif" />История компании</div></a>
<a href="#"><div id="menu" ><img src="list.gif" />О Компании</div></a>
<a href="#"><div id="menu"><img src="list.gif" />Партнеры</div></a>
<a href="#"><div id="menu"><img src="list.gif" />Наши контакты</div></a>

Наверно правильно это было делать в виде списка, но там вообще косяки какие то выходят (

[Dimitry Wolotko]

@Hippy, id может быть только один, на то он и id. Потому для таких случаев используют class=""

[Hippy]

спасибо

[Hippy]

Ребята, извините за мульти-пост, просто очень нужно и срочно.. спасайте!