Reconizing a:hover with a

I am trying to turn a Wordpress nav menu item into a css button. Browser is recognizing css code for #navigation-menu ul > li.menu-item-3226 > a > span{...} so the normal button state looks fine but when I hover it doesn't recognize #navigation-menu ul > li.menu-item-3226 > a:hover > span{...} am I using incorrect CSS syntax or am I SOL? I can't change the generated html, so I am limited to modifying the 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>