I'm working on this site: http://waterfordproperty.com/our-team/ and have been trying to take CSS from the old programmer and piece it together with what the client needs. I have been trying to get the menu item "our team" to not link to a page, but have a drop down image appear behind the list of everyone's name. I have tried several different options, but nothing has been sufficient. It will appear on the page, but not function

I need it to look like the image on the attached page with an "on hover" effect for the text on the drop downs.

Here's the CSS I currently have... can anyone tell me what to change/delete/add? Thanks for any help and your expertise!
Code:
#menu-main { 
margin-top: 74px; 
}

#menu-main li { 
float: left; 
height: 48px; 
border-top: 
1px solid transparent; 
}
#menu-main li.current-menu-item, #menu-main li:hover { 
border-top: 1px solid #787878; 
}

#menu-item-489 ul li a:hover { 
background: url('http://waterfordproperty.com/wp-content/uploads/2013/07/Our-Team-Drop-Down.png') no-repeat; 
overflow:visible; 
position:relative; 
z-index:2010;  
}

#menu-main a { 
display: block; 
height: 49px; 
line-height: 49px; 
font-size: 12px; 
color: #b3b3b3; 
text-transform: uppercase; 
padding: 0 25px; 
text-decoration: none; 
background: url('images/bg_main-menu-item.png') no-repeat; }

#menu-main li:first-child a { 
background-image: none; 
}