Am having a bit of a problem with my menu in that I cant get rid off the little boxes on the sides of the dropdown menu.... Pictures will probably explain it better.... please be patient with the pics as we have a pretty slow connection....)

1. - how do I get rid of the background where the arrow is ?

2. How do I get rid of the two columns before and after the dropdown menu?

3. How can I change the colour of the text (bg etc) of the submenu with out altering the top menu?

Below is the css that I have so far.....

.MainMenu_MenuContainer {
 background-color: transparent; 
}
.MainMenu_MenuBar {
 cursor: hand;
 height:18px;
 background-image:url(images/menu_grey_bg.jpg);
}
.MainMenu_MenuItem {
 cursor: hand;
 color: White;
 font-family: "Verdana", "Arial", sans-serif;
 font-size: 13px;
 font-style: normal;
 font-weight:normal;
 background-color: grey;
}
.MainMenu_SubMenu {
 z-index: 1000;
 cursor: hand;
 background-color: white;
 background-image: none;
 color:#0066CC;
 }
.MainMenu_MenuBreak {
 height: 4px;
 width: 0px;
}
.MainMenu_MenuItemSel {
 cursor: hand;
 color: White;
 font-family: "Verdana", "Arial", sans-serif;
 font-size: 13px;
 font-style: normal;
 font-weight:normal;
 background-image:url(images/menu_blue_bg.jpg);
}

.MainMenu_MenuArrow {
 font-family: webdings;
 font-size: 9pt;
 cursor: pointer;
 cursor: hand;
}
.MainMenu_RootMenuArrow {
 font-family: webdings;
 font-size: 9pt;
 cursor: pointer;
 cursor: hand;
}
ANy help would be greatly appreciated.....

Cheers