Help with rollover menus

[dthomas31uk]

Hi, Want to know if someone can help with my problem. I have the following on my html page

<ul id="painters2">
<li><a class="red" href="#nogo"><em>Websites</em></a></li>
<li><a class="orange" href="#nogo"><em>Digital Printing</em></a></li>
<li><a class="yellow" href="#nogo"><em>Vinyl Signs</em></a></li>
<li><a class="green" href="#nogo"><em>Contact Us</em></a></li>
<li><a class="blue" href="#nogo"><em>Matisse</em></a></li>

</ul>


and the css is as follows


#painters2 {
padding:0;
margin:0;
list-style-type:none;
}
#painters2 li {
width:75px;
height:20px;
float:left;
border:1px solid #000;
margin-right:2px;
}
#painters2 a em {
font-style:normal;
font-size:1em;
line-height:1.5em;
}
#painters2 a {
text-decoration:none;
color:#000;
position:absolute;
width:75px;
height:20px;
display:block;
text-align:center;
}
#painters2 a.red {background:#00a8de; color:#fff;}
#painters2 a.orange {background:#eb0c8b; color:#000;}
#painters2 a.yellow {background:#fde92a; color:#000;}
#painters2 a.green {background:#080; color:#fff;}
#painters2 a.blue {background:#00c; color:#fff;}
#painters2 a:hover {
width:120px;
height:28px;
z-index:200;
background:transparent url(../ads/opaque.gif);
}
#painters2 a:hover em {
font-size:1.5em;
line-height:1.1em;
overflow:hidden;
cursorointer;
background:#fff;
border:1px solid #000;
position:absolute;
width:120px;
height:25px;
left:-12px;
top:-4px;
}
#painters2 a:hover.red em {background:#00a8de;}
#painters2 a:hover.orange em {background:#eb0c8b;}
#painters2 a:hover.yellow em {background:#fde92a;}
#painters2 a:hover.green em {background:#080;}
#painters2 a:hover.blue em {background:#00c;}

You will see when opened that the colours are a full background to the text. What I am trying to do is have the color say roughly 20px to the left of the text, thus leaving text has a white background. How can achieve this any ideas guys. Am I going about this the wrong way???

Hope someone can help.

Cheers guys

 

[Vragabond]

Just to be sure, is it something like this what you're talking about?

http://css.maxdesign.com.au/listamatic/vertical18.htm

 

[dthomas31uk]

Yeah, very similar, but i reuiqre different colours for each rollover

 

[Vragabond]

So can you not use the styles and structure on that list and just add additional class for the background colours?

 

[dthomas31uk]

Have tried that vragbond but no joy

<li class="redNew"><a href="#">Item two</a></li>

Any ideas???

 

[FAM]

When i created a site for a friend (See,

http://www.williamreay.com)

i used javascript with roll over images, if you view the source code you can get the code, you just then need to create 2 images for each item.

Any use or are you not wanting to go down the javascript route?