javascript - li :hover effect 的 shift 选择器

Question

我有一个菜单

<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>

我正在尝试创建一个弹出菜单，执行此操作的 CSS 是:

#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;
}

我想替换两个列表中的元素，但它们有不同的样式。我可以很容易地替换顶级元素，但它的弹出菜单我无法替换其上的链接。

我的 SIFR 代码:

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'
});

Answer 1

我认为您的部分问题是 sIFR 需要显示要执行的元素。如果您不能使用@font 样式，我可以告诉您，我已经以这种方式在一个小工作中成功地使用了 Cufon，如下所示:http://www.reneworganicbeauty.com/

它仍然有点挑剔，颜色变化需要一些小 Action ，但至少它在菜单中工作正常。