Thanks again for the tip.
I found setting the padding in the
ul#cssmw1 > li > a, ul#cssmw1 > li > a:link {
on its own wasn't enough, it just moved the image further up the screen in my example, so i tried setting a negative margin for this too...
ul#cssmw1 > li > a, ul#cssmw1 > li > a:link {
background-color: transparent;
background-position: 95% 50%;
background-repeat: no-repeat;
border-bottom: dotted 1px #9EA3AA;
color: #343446;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
height: 20px;
line-height: 20px;
margin: -100px 0 0 0;
padding: 100px 10px 5px 5px;
text-decoration: none;
width: 150px;
outline-style: none;
}
At the moment, I am just testing on a vanilla page layout so don't know if it will work in my design... but this gives me a larger clickable area!