Submenu styling

I am trying to get hovers to work properly on a navigation bar. The tricky part is that the “normal” navigation works fine (try the solutions drop down), but the “about” drop down with the left rounded corner I setup does not keep its rollover bg while hovering over its submenu.

https://providential.com/dev/

The REALLY crazy thing is that the code is identical as far as I can see, but it is rendering differently. I added in green text to highlight the issue as well. Again, my issue is that the “about” menu item is not keeping its rollover/hover bg.

There is a lot of CSS behind this menu, but I will post what I think is relevant.

Full CSS as of this posting is available here.

#menu-main-navigation  li a {
    background-image: url('images/nav-bg.jpg');
    background-repeat: repeat-x;
    background-position: right;
    padding: 0px 8px;
    border-left: solid 1px #CCC;
    display: block;
    text-decoration: none;
    font-size: 15px;
    color: #000;
    line-height: 30px;
    height:30px;
    width:120px;
}
#menu-main-navigation #menu-item-17 a{
	background-image: url('images/nav-bg-right.jpg');
	width:121px;
}
#menu-main-navigation #menu-item-20 a{
	background-image: url('images/nav-bg-left.jpg');
	width:121px;
	border:0px;
	display: block;
}
#menu-main-navigation li a:hover {
	background-image: url('images/nav-bg-hover.jpg');
}
#menu-main-navigation #menu-item-17 a:hover{
	background-image: url('images/nav-bg-right-hover.jpg');
	width:121px;
}
#menu-main-navigation #menu-item-20 a:hover{
	background-image: url('images/nav-bg-left-hover.jpg');
	width:121px;
	border:0px;
	display: block;
}
----- SKIPPING A BUNCH OF LINES HERE -----
#access li:hover > a{
	background-image: url('images/nav-bg-hover.jpg') ; /*need this to work on left */
	color: #0f0;/*interesting*/
}
/*change*/
#menu-main-navigation #menu-item-20 li:hover > a{
	background-image: url('images/nav-bg-left-hover.jpg');
	color: #0f0;/*interesting*/
	display: block;
}