How to make sIFR link expand 100%/static width

Question

Hi guys,

I have created a normal HTML menu and used sIFR to for the top nav items. At the moment when you hover over the sIFR link text it changes colour as it should. The issue is that I need the text hover colour to stay active when I hover over the button and not just the text which the text link is surrounded by. sIFR seems to calculate width of the link based on the length of the text, is there anyway to change this or make it a specific width.

Any help would be greatly appreciated. Thanks.

sIFR:

sIFR.replace(lola, {
  selector: '.sifr',
  wmode: 'transparent',  
  css: [
        '.sIFR-root {font-size: 15px; color: #000000;}',
        'a {width: 161px; color: #000000; text-decoration: none; display: block;}',
        'a:hover {color: #FFFFFF; cursor: pointer; }'
       ],
  onRelease: function(fi) { fi.getAncestor()},
  tuneWidth: 10
});

CSS:

ul#navigation
{
    width: 785px;
    height: 46px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul#navigation li 
{
    float: left; 
    height: 46px;
    display: block; 
    list-style: none; 
    position: relative; 
    padding: 0;
    margin: 0;
    font-size: 1.25em;
}

ul#navigation li a
{
    display: block;
    color: #000000;
}

ul#navigation li a:hover
{
    color: #FFFFFF;
    text-decoration: none;
}

ul#navigation li#nav1
{
    width: 164px;
    height: 27px;
    padding: 19px 17px 0px 17px;
    background: url(../images/bgNav.gif) 0px 0px no-repeat;
}

ul#navigation li#nav1:hover
{
    background: url(../images/bgNav.gif) 0px -46px no-repeat;
}