The following short tutorial will show you how to create a simple menu like the one in the image bellow.

In order to simulate de the bullet we use the css property “background”.
For positioning the bullet on the right  side, we use “background-position” and we specify the left offset in pixels.

We also need to specify the exact width in pixels and the property “display: block;”

<style type=”text/css”>

a.link
{

text-align:left;
display:block;
width: 140px;
background-image: url(’Bullet.gif’);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: 124px 0px;
text-decoration: none;

}

a.link:hover
{

text-align:left;
display:block;
width: 140px;
background-image: url(’BulletOver.gif’);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: 124px 0px;

}

</style>

<a href=”http://www.thecssbug.com/” class=”link”>
Mouseover menu
</a>