Css 重新确认a：悬停在a

我正在尝试将Wordpress导航菜单项转换为css按钮。浏览器正在识别导航菜单ul>li.menu-item-3226>a>span{…}的css代码，所以正常的按钮状态看起来很好，但当我悬停时，它无法识别导航菜单ul>li.menu-item-3226>a:hover>span{…}是我使用了错误的css语法还是我是SOL？我无法更改生成的html，因此我只能修改CSS

   CSS:
   #navigation-menu ul > li.menu-item-3226 > a > span{...}
   #navigation-menu ul > li.menu-item-3226 > a:hover span {... }
   #navigation-menu ul > li.menu-item-3226 > a:active span {...}

<div id="main-menu" class="pngfix">
<div id="dropdown-holder" class="container_24">
<div id="navigation-menu" class="navigation-menu">
<ul id="main-top-menu" class="sf-menu sf-js-enabled sf-arrows">
    <li id="menu-item-1021" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-86 current_page_item menu-item-1021">
    <li id="menu-item-3226" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3226">
        <a href="http://www.example.com/">
            <span>Order</span>
        </a>
    </li>
</ul>
</div>
</div>
</div>

只需将缺少的>添加到悬停样式中，就可以了

#navigation-menu ul > li.menu-item-3226 > a:hover > span {... }

---

您的HTML在第一次关闭时就被弄乱了，但您的CSS似乎工作正常。请参见：

---

此外，是否需要按类查找s？导航菜单ulli a:hover span{}不起作用吗？

我从这个开始。我在调试时取出>的原因是，当我用Firebug检查页面时，它在样式窗口中列出了这些：导航菜单ul.sf-menu>li>a:hover span{…}导航菜单ul>li.menu-item-3226>a>span{…}应该可以工作，对吗？我使用了您的JSFIDLE并在上面添加了导航菜单ul.sf-menu>li>a:hover span{color:0071BA；}，JSFIDLE仍然工作。由于某些原因，它没有覆盖我页面上的导航菜单ul.sf-menu>li>a:hover span{color:0071BA；}。再次查看我的代码以查找错误……您可能已经回答了自己的问题。导航菜单ul.sf-menu>li>a:hover span比导航菜单ul>li>a:hover span更明确我有一个公开的评论。没有看到，因为它是在Wordpress编辑器中，并且没有我习惯的颜色辅助。对我来说。谢谢。如果我没有为菜单项指定类，那么它会影响所有菜单项。我只想修改item-3226。好吧，你可能不需要所有的>都是你的CSS。看起来您的样式正在其他地方被覆盖。我的想法可能是使用！在任何规则之后都很重要，以确保其优先。