wootique menubar properties

I’m using Wootique and trying to replicate the hover properties from the top menu into my own category menu in the sidebar – without success :o(.

I’ve been using the following:

.cat-item {border: 1px solid; margin: 2px; padding: 2px 35px 2px 4px;  -webkit-border-top-right-radius:6px;
  -moz-border-radius:6px 6px 0 0;
  border-radius:6px 6px 0 0; }
.cat-item li:hover a {border: 1px solid red; margin: 2px; padding: 2px 35px 2px 4px;  -webkit-border-top-right-radius:6px;
  -moz-border-radius:6px 6px 0 0;
  border-radius:6px 6px 0 0; }
 .product-categories li:hover a { color:#222; background: #ff0000  }

copied from the css for the .nav menu, but all that’s doing is highlighting the *text* on hover, rather than the whole .li box. I’m trying to achieve a similar effect to the menu, where hovering anywhere in the list item area changes the background colour and font colour, and acts as the hyperlink just from the field rather than having to actually hover over the individual words in the menu.

I know this is a css issue rather than anything specific to the theme, but I hoped someone here would be knowledgeable enough to just point to where I’m going wrong.

Thanks as ever

http://wordpress.org/extend/plugins/woocommerce/