Hi All,

 

I need a little help with an issue with a nav bar i am coding:

 

http://s315189846.websitehome.co.uk/pheonix/

 

If you hover over right to the left of the button you will see that the 'hover state' graphic is split in two.

 

Here is the offending code:

 

HTML

 

<div id="nav">
		<div class="menu-main-nav-container"><ul class="menu" id="header_nav"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20 current_page_item menu-item-51" id="menu-item-51"><a href="http://s315189846.websitehome.co.uk/pheonix/"><span>Home</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58" id="menu-item-58"><a href="http://s315189846.websitehome.co.uk/pheonix/about-us/"><span>About Us</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57" id="menu-item-57"><a href="http://s315189846.websitehome.co.uk/pheonix/products/"><span>Products</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56" id="menu-item-56"><a href="http://s315189846.websitehome.co.uk/pheonix/testemonials/"><span>Testemonials</span></a></li>

<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55" id="menu-item-55"><a href="http://s315189846.websitehome.co.uk/pheonix/faqs/"><span>FAQ’s</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-groups menu-item-97" id="menu-item-97"><a href="http://s315189846.websitehome.co.uk/pheonix/groups/useful-links/"><span>Useful Links</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-71" id="menu-item-71"><a href="http://s315189846.websitehome.co.uk/pheonix/category/blog/"><span>Blog</span></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52" id="menu-item-52"><a href="http://s315189846.websitehome.co.uk/pheonix/contact/"><span>Contact</span></a></li>
</ul></div>

 

CSS

 

#header_nav li a:hover{
height: 45px;
padding-left: 8px;
display: inline-block;
background: url('../../images/button_left.png') top left no-repeat;	
text-decoration: none;
color:#FFF;
float: right; }

#header_nav li a span:hover{	
height: 45px;
color: #FFF;
display: block;
padding: 12px 12px 5px 4px;
font-weight: bold;
background: url('../../images/button_right.png') top right no-repeat; }

 

 

Any help appreciated!

 

- G

 

Edit: the graphics used are as you see them. A small one on the left then along one on the right that 'expands' to fit. Thanks.

Edited February 23, 201214 yr by greyhat

Fixed, thanks anyway.