How to make an arrow down in asp.net menu with site map DataSource?

My menu in asp.net show on the right corner, but I want it to be downward. Here is the url of my website http://www.theucreate.com/default.aspx开发者_开发百科

In what we do menu it shows the arrow on the right rather than down.

CSS Code :
 .menuItem
        {
            border:Outset 1px black;
            background-color:Gray;
            font:14px Arial;
            color:White;
            padding:3px;
            position:relative; 
            z-index: 9999;
            width:125px; 
            text-align:center;


             }

Menu Code :

                            <asp:SiteMapDataSource ID="srcSiteMap" Runat="server" ShowStartingNode="false" />

Site Map Code :

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode
    url="~/Default.aspx" 
    title="Home" 
    description="The home page of the Website">

    <!-- SiteMapPath Nodes -->
    <siteMapNode 
      title="Home"
      description="Home">

    </siteMapNode>

    <!-- Menu Nodes -->
    <siteMapNode 
      title="What we do"  
      description="Group of companies">
      <siteMapNode 
        url="~/UsingMenu/MenuSiteMap.aspx" 
        title="ADMG logo"  
        description="Abu Dhabi Marketing Group" />
        <siteMapNode
   url="~/UsingMenu/MenuSiteMap.aspx111"
   title="JamalMedia Logo"
   description="Jamal Media" />
        <siteMapNode
   url="Images/images/Emirates Palace.jpg"
   title="AFKARsoft Logo"
        description="AFKARsoft"/>
    </siteMapNode>

    <!-- TreeView Nodes -->
    <siteMapNode 
      title="Portfolio"  
       url=""
      description="">

    </siteMapNode>

      <siteMapNode
     title="Download"
     description="">

      </siteMapNode>

      <siteMapNode 
     title="News Blog"
     description="">

      </siteMapNode>


      <siteMapNode
     title="About Us"
     description="">

      </siteMapNode>
      <siteMapNode
     title="Awards"
     description="">

      </siteMapNode>


      <siteMapNode
     title="Contact Us"
     description="">

      </siteMapNode>

  </siteMapNode>

</siteMap>

this is the firebug result for that image .

<img style="border-style:none;vertical-align:middle;" alt="Expand What we do" src="/WebResource.axd?d=dwnZhK7b4PUDsKPTU3AZnUtITQ9KjzrPTvWdHZ0MJ5F90CTN6V8nGd5pgOYaON4YzxrLgw8Gv5od1SOfZnP5XQ_U_OV-qIXKJzrb0MKwjSo1&amp;t=634395197491956634">

i googled around for this problem and i find a blog which have similar situation and might help his code to solve your problem.

protected void _siteMenu_ItemDataBound(object sender, System.Web.UI.WebControls.MenuEventArgs e)

{

// Reference the underlying SiteMapNode object...
MenuItem item = (MenuItem)e.Item;
SiteMapNode nodeFromSiteMap = (SiteMapNode)e.Item.DataItem;

string onImage = "";
string offImage = "";
string navUrl = "";

// If we have an imageUrl value, assign it to the menu node's ImageUrl property
if (nodeFromSiteMap["imageUrl"] != null)
{
onImage = System.Web.HttpContext.Current.Request.ApplicationPath + System.IO.Path.Combine("/Images/Elements/", nodeFromSiteMap["imageUrl"]);
offImage = System.Web.HttpContext.Current.Request.ApplicationPath + System.IO.Path.Combine("/Images/Elements/", nodeFromSiteMap["altImageUrl"]);
}
navUrl = nodeFromSiteMap["url"];

// These objects are necessary in order to capture the image object into a rendered html format
string src = offImage;
string toolTip = "";
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter();
HtmlTextWriter htmWriter = new HtmlTextWriter(sw);
HtmlImage image = new HtmlImage();

image.Style.Add("border-style", "none");
MenuItem theMenuButton = new MenuItem();
theMenuButton.NavigateUrl = navUrl;
image.Src = src;

if (onImage != "" && onImage != null)
image.Attributes["onMouseOver"] = "this.src='" + onImage + "';";
if (onImage != "" && onImage != null)
image.Attributes["onMouseDown"] = "this.src='" + onImage + "';";
image.Attributes["onMouseOut"] = "this.src='" + offImage + "';";
image.RenderControl(htmWriter);
item.Text = sw.ToString();
}

Adding mouse over image in asp.net menu control add custom icon to specific menu item

That image is embedded inside a DLL file as a resource. You have to change the image in that resource. But I think Microsoft must have a property to let you change that image and override it with your own image.

I suggest you get firebug addon for firefox and inspect the arrow icon (right click when addon installed), you will find its file path in the img src. then you can google for a suitable down arrow and upload this to the path you found from inspecting the element!

EDIT

just noticed its a odd web resource path ! guess you will have to have a look on your webserver shouldnt be too hard to find :)

Alternative

use the XML to make your own menu with XSLT then you can have full controll over its layout ect :)