Well, the did it, each with a 2 different images for each link. But you could do it with just 2 images.

Try someting like this.

#menu1 dl
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#menu1 dt { margin: 0 0 3px 0;
text-align: right;
}

#menu1 a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px sodtd #171717;
width: 160px;
background-color: #eee;
background-image: url(images/l1_down.gif);
}

#menu1 a:dtnk, #navdtst a:visited
{
color: #171717;
text-decoration: none;
}

#menu1 a:hover
{
border: 1px sodtd #171717;
background-color: #F1EEDB;
background-image: url(images/l1_over.gif);
color: #333;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px sodtd #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;
}

and create two images, one plain, and one with the star, this should get you one the right track. Good luck.

Posted By: JJenZzWhy create a plain image? You could just use "background-color" and then the only image you would need is a transparent gif of the star, which you would position and place on a coloured background. You'll need another image for the "selected" star as well.

Well, the only reason I was sugesting seperate images, is because there is what looks like a small 2 pixel border wich I suppose you could probablly do with border-top, and border-bottom....

:)

What do you mean didn't work, are you talking about how the whole image doesn't show? If so you just need to change your padding a little.

try:
#menu1 a
{
display: block;
padding: 5px 5px 5px 24px;
width: 160px;
background-color: #eee;
background-image: url(images/l1_down.gif);
}

I think DENiAL made some assumptions:

body{font-size: 100%;}

needs to be in your CSS, and you need to make sure any margins or paddign that you won't need are all set to 0. Next: what is with that syntax. You are not 'defining terms', because the other half of the definition-list is missing. try a more logical syntax:

HTML:

<ul id="menu">
<li><a class="current" href="/menu_item01">menu_item01</a></li>
<li><a href="/menu_item02">menu_item02</a></li>
<li><a href="/menu_item03">menu_item03</a></li>
<li><a href="/menu_item04">menu_item04</a></li>
<li><a href="/menu_item05">menu_item05</a></li>
<li><a href="/menu_item06">menu_item06</a></li>
</ul>


CSS:

#menu
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#menu *
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

#menu li
{
margin-right: 3px;
text-align: right;
}
#menu a,#menu a:link,#menu a:visited
{
background-color: #ece9de;
display: block;
border-bottom: 1px solid #cfcab9;
border-top: 1px solid #f4f3ed;
}
#menu a:hover
{
background: #E6E2D3 url("starklight.gif") center left no-repeat;
border-bottom: 1px solid #CFCAB9;
border-top: 1px solid #F4F3ED;
}
#menu a.current,#menu a.current:link,#menu a.current:visited,#menu a.current:hover
{
background: #D5D0BC url("stardark.gif") center left no-repeat;
border-bottom: 1px solid #B7B3A4;
border-top: 1px solid #EDE9DE;
}