Active hover state CSS

hey guys..i'm trying to get the green hover state to cover top to bottom at 50px in height. As you can see it's only hovering at 25pixels over the Home link.

http://williamswestmoreland.wp.hobbsherder.com

what am i missing here in the css?

ul.hh-hmenu>li>a:before, ul.hh-hmenu>li>a:after
{
position: absolute;
display: block;
content:' ';
top: 0;
bottom:0;
z-index: -1;
background-image: url('images/menuitem.png');
}

 

Well, for starters :bottom and :top are unreliable when used at the same time cross browser, you want a height you should state a height.

Though... what the devil are you even trying to do with that? You don't seem to be doing anything that would warrant the use of generated content on that menu?

Of course, I'd also suggest you call it 'current' instead of 'active', so it's not confused with the :active psuedostate.... and natually 90% of your markup belongs in the trash given all those endless pointless DIV for nothing, pointless bandwidth wasting TITLE attributes, though I know that's par for the course with the steaming pile of manure known as turdpress being in the mix... but then there's a reason where you have:

   <div class="cleared reset-box"></div>
    <div class="hh-bar hh-nav">
        <div class="hh-nav-outer">
        <div class="hh-nav-wrapper">
        <div class="hh-nav-inner">
    	
<ul class="hh-hmenu menu-3">
	<li class="menu-item-32 active"><a title="Home" href="http://williamswestmoreland.wp.hobbsherder.com/" class="active">Home</a>
	</li>
	<li class="menu-item-33"><a title="About Us" href="http://williamswestmoreland.wp.hobbsherder.com/about-kent-williams-mickey-westmoreland/">About Us</a>
	</li>
	<li class="menu-item-38"><a title="Featured Listings" href="http://williamswestmoreland.wp.hobbsherder.com/featured-temecula-listings/">Featured Listings</a>
	</li>
	<li class="menu-item-37"><a title="Featured Communities" href="http://williamswestmoreland.wp.hobbsherder.com/featured-temecula-communities/">Featured Communities</a>
	</li>
	<li class="menu-item-43"><a title="Search MLS" href="http://williamswestmoreland.wp.hobbsherder.com/search-temecula-mls/">Search MLS</a>
	</li>
	<li class="menu-item-44"><a title="Seller Tools" href="http://williamswestmoreland.wp.hobbsherder.com/temecula-seller-tools/">Seller Tools</a>
	</li>
	<li class="menu-item-35"><a title="Buyer Tools" href="http://williamswestmoreland.wp.hobbsherder.com/temecula-buyer-tools/">Buyer Tools</a>
	</li>
	<li class="menu-item-42"><a title="Resources" href="http://williamswestmoreland.wp.hobbsherder.com/temecula-resources/">Resources</a>
	</li>
	<li class="menu-item-36"><a title="Contact Us" href="http://williamswestmoreland.wp.hobbsherder.com/contact-kent-williams-mickey-westmoreland/">Contact Us</a>
	</li>
</ul>
        </div>
        </div>
        </div>

Code (markup):

I'd have:

<div id="mainMenuWrapper">
	<ul>
		<li><a href="/" class="current">Home</a></li>
		<li><a href="/about-kent-williams-mickey-westmoreland/">About Us</a></li>
		<li><a href="/featured-temecula-listings/">Featured Listings</a></li>
		<li><a href="/featured-temecula-communities/">Featured Communities</a></li>
		<li><a href="/search-temecula-mls/">Search MLS</a></li>
		<li><a href="/temecula-seller-tools/">Seller Tools</a></li>
		<li><a href="/temecula-buyer-tools/">Buyer Tools</a></li>
		<li><a href="/temecula-resources/">Resources</a></li>
		<li><a href="/contact-kent-williams-mickey-westmoreland/">Contact Us</a></li>
	</ul>
<!-- #mainMenuWrapper --></div>

Code (markup):

Though good luck convincing turdpress of that.

In any case, just what is it you are trying to do with that mess of bizzaro-land selectors and generated content? It doesn't even make sense.