Hi,
This is the web page I'm trying to modify:
http://www.elliottgrahamproperties.com/
as you can see, on the top of the page, there is a navigation menu.
Originally this menu used to behave in a way that when you moved your mouse over the items, it would show a background picture with a different color (the height would be the same as the light blue menu bar height) but now when you hover your mouse on the menu items, only one of the hover images on the background appears (the left rounded corner one) and it doesn't fill the height of the menu bar though it's supposed to be in a way that both images (right and left i.e. nav_hover-left.png and nav_hover-right.png) appear and fill the menu bar.

Here is the CSS source for the top menu:

Code:
/* =Menu
-------------------------------------------------------------- */

#access {
	display: block;
	float: left;
	margin: 0 auto;
	width: 720px;
}
#access .menu-header,
div.menu {
	font-size: 18px;
	margin-left: 19px;
	width: 788px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;

}
#access a {
	color: #333;
	display: block;
	line-height: 28px;
	padding: 0 12px;
	text-decoration: none;
	height:29px;
}
#access a span{ padding-right:10px;font-weight:bold;height:29px;font-size:18px;}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a{
	display:block;	
	color:#fff;
	background:url(images/nav_hover-left.png) left top no-repeat;
	height:29px;
	line-height:28px;
	text-decoration: none;
}
#access li:hover  > a span,
#access ul ul :hover  > a span{
	display:block;
	color:#fff;
	background:url(images/nav_hover-right.png) right top no-repeat;
	height:29px;
	line-height:28px;
	text-decoration: none;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	background: url(images/nav_hover-left.png) no-repeat scroll left top transparent;
    color: #000000;
    display: block;
    height: 29px;
    line-height: 28px;
    padding: 0 15px;
}

#access ul li.current_page_item > a span,
#access ul li.current-menu-ancestor > a span,
#access ul li.current-menu-item > a span,
#access ul li.current-menu-parent > a span{
    background: url(images/nav_hover-right.png) repeat scroll right top transparent;
    color: #FFFFFF;
    display: block;
    height: 29px;
    padding-right: 10px;
}
If I remove the span from the "#access li:hover > a span", and "#access ul ul :hover > a span{" tags, it will show the right image!

Here are the direct links to the images:
http://www.elliottgrahamproperties.c...hover-left.png and http://www.elliottgrahamproperties.c...over-right.png

Please help me, I've been struggling with this for more than 6-7 hours and haven't been able to find the problem, although it seems it cannot be some dramatic mistakes in the code! Unfortunately I haven't developed this page and I'm only maintaining it! The problem started when they wanted to remove something from the menu (I have no idea what they have done though) and they screwed the code and now they ask me to fix it!