Remove arrows from menutemplate

Question

I've create a web part that displays a SPGridView with an SPMenuTemplate. My problem is the context menu that pops up has these little arrows on the left hand side which are undesired and which also throw the other items out of kilter. DOes nyone know how to gget rid of them?

My menu template code is:

<SharePoint:MenuTemplate runat="server" ID="classifiedsTitleTemplateID">
  <SharePoint:MenuItemTemplate ID="ViewClassifiedItemTemplate" runat="server" Text="View Item" ClientOnClickScript="classsifiedsPostBack('View,%Title%');" />
  <SharePoint:MenuItemTemplate ID="EditClassifiedItemTemplate" runat="server" Text="Edit Item" ImageUrl="/_layouts/images/Edit.gif" ClientOnClickScript="classsifiedsPostBack('Edit,%Title%');" />
 </SharePoint:MenuTemplate>

Answer 1

My gut would say they're managed by some sort of a CSS class. If that's the case, you can use the DOM explorer in IE Developer Tools, Chrome, or Firebug, determine the class and just deploy some CSS to manipulate it.

With it being a popup it can be "difficult" to isolate it in the DOM, so another approach may be to look at the images folder in the 12/14 hive (on a sandbox, never on production), and see if you can find the arrow icon. Then search the core CSS for that image name--may help you pinpoint the class easier.

Once you know what it is, you can add a line of CSS directly to that page to manipulate it, or change it globally in a custom stylesheet if you so prefer.

Answer 2

You may not be able to get rid of them unless there's a property you can use to control that. I'm not sure if there is or not. A fix, if you are allowed would be to dig into the DOM and hide it from rendering in the browser.