how would i do this

[chris9902]

if you go to http://www.royalmail.com look at there nav on the left and when you hover over a link the background goes gray but the link stays normal until you go over that.

how do you do that. i need a nav just like that.

[DaveSW]

it's javascript/css combo

<table width="140" border="0" cellspacing="0" cellpadding="2">
<tr>
<td class="submenu" onmouseover="this.className='altsubmenu'" onmouseout="this.className='submenu'">
<img src="/docContent/other/Content_Images/HTML_images/greyarrow.gif" width="8" height="9" border="0" alt="">
<a href="/portal/default/all/home?paf_gear_id=100002&paf_gm=content&paf_dm=full&paf_gear_state=con_content&xmlPath=/docContent/xml/HTML_Files/landingPages/royal_mail_athome_landing.xml" class="llisubmenu" title="Mail services at home">Mail services at home</a></td>
</tr>


and the css:

<style>
.llisubmenu { font : normal 10px Arial, Helvetica, sans-serif;}
A.llisubmenu:active, A.llisubmenu:link, A.llisubmenu:hover, A.llisubmenu:visited {text-decoration:none;}
.altlhdr {display:block; background: #f0f0f0;}
.lhdr {display:block;}
.submenu {background: #ffffff; background-color: #ffffff; border-bottom-color: #c0c0c0; border-bottom-style: solid; border-bottom-width: 1px;}
.altsubmenu{background: #f0f0f0; background-color: #f0f0f0; border-bottom-color: #c0c0c0; border-bottom-style: solid; border-bottom-width: 1px;}
.menutitle{
border-bottom-color: #c0c0c0; border-bottom-style: solid; border-bottom-width: 1px; width: 100%;}
.invisible {display:none;}
</style>


And i'd never realised Royal Mail employed such a rubbish web designer! You should have seen the source code!!

[pyro]

lol... Dave beat me to it, but to show that it can be done in pure css: http://www.webdevfaqs.com/layouts/layout1.htm

[DaveSW]

LOL That is a cleaner way to do it. Just not quite the same LOL. (in Opera at least)

[DaveSW]

You might like to mention on your page (pyro) that you can change

background-position: 5px;

to

background-position: left;

to have the arrow centralised vertically in case the font size is too large and the line breaks.

[pyro]

You're right that it's a bit different (in my opinion, for the better) as the entire area that get's highlighted will become the link...

Also, the 5px refers to 5px from the left, not the top. So, when the font-size is set larger, it will still be centered... :)

[DaveSW]

Ah I see! LOL. I prefer tradtional left right and centre LOL.

And yes, it is better for accessibilty if the entire block is a link.

[chris9902]

thanks all

and that source code is so bad i almost felt sorry for them

how would you edit THAT! :D