sIFR slector for li:hover effect

Question

I have a menu

<div id="nav">
  <ul>
    <li><span><a href="/index.asp">Home</a></span></li>
    <li><span><a href="/aboutus.asp">About Us</a></span></li>
    <li><span><a href="/whatWeDo.asp" id="whatWeDo">What We Do</span></a>
        <ul id="sideNav">   
           <li><a href="/page1.asp"tabindex="15">page 1</a></li>
           <li><a href="/page2.asp"tabindex="16">page 2</a></li>
           <li><a href="/page3.asp"tabindex="17">page 3</a></li>
        </ul>
    </li>  
   <li><span><a href="/studies.asp">Studies</a></span></li>
  </ul>
</div>

I am trying to create a pop out menu the CSS that does this is:

#nav ul{
    padding: 0;
    margin: 0;
}
#nav ul li{
    list-style: none;
    font-size: 16px;
    width:170px;
    padding:0px 0px 10px 0px;
}
#nav ul li ul li{
    font-size: 13px;
}
#nav ul li ul{
    display: none;
}
.showMenu, #nav ul li:hover ul{        
    width:220px;
    padding:7px;
    background: #F2F2F2;
    border:1px solid #F2F2F2;
    display: block;
    position: absolute;
    left: 85px;
    top: 30px;
}

#nav ul li ul li{
    padding:2px 0px 2px 0px;
}

I am tring to replace the items within both lists but they have different stlyes. I can replace the top level elements easy enough but its the pop out menu that I can not replace the links on.

my SIFR code:

sIFR.replace(futura, {
    selector: '#nav ul li span',
    css: ['.sIFR-root {}a{ color:#639463;text-decoration:none; font-size: 16px; font-weight:bold;} a:hover{color:#83C000;text-decoration:underline;}'],
    wmode: 'transparent'
});

sorry im not helping you here but i want to give you the tipp of using something similiar to http://www.fontsquirrel.com/ to use non-webstandard fonts — ggzone, Jan 11 '12 at 14:31
I've looked into @fonts which is what fontsquirrel use i point you to this post: http://stackoverflow.com/q/4061647/1122811 — user1122811, Jan 11 '12 at 14:45
@font works for IE7+,Safari,FF,Chrome ... the 2% remaining getting the fallback font... i see no problem except you have the font as ttf, otf, dfont or windows post script. — ggzone, Jan 11 '12 at 14:48
@ggzone one problem might be the font license - many font foundries don't allow font embedding, but do allow sIFR or image replacement techniques. — ptriek, Jan 11 '12 at 15:11
if the customer dont want to pay the license hes getting a web-standard font... its easy; sIFR is kinda "old" techniquie and has some major issues coming with it. bit better is cufon but kinda same problem... font styles, breaks, text copy and so on... — ggzone, Jan 11 '12 at 15:20

score 0 · Answer 1 · answered Jan 11 '12 at 15:50

I think part of your problem is that sIFR needs displaying elements to act on. If you can't use @font styles, I can telly ou that I've successfully used Cufon in this way on a small job, as seen here: http://www.reneworganicbeauty.com/

It's still a bit finicky, and colour changes take a bit of fiddling, but at least it works ok in menus.

sIFR slector for li:hover effect

1 Answers1