How to display a flyout menu on clicking an image in Grid header in MVC?

Question

A grid is displayed using the following code in MVC.

<%= this.Grid( "routes-" + mc , "Testing", Model.Routes, new GridBuilder<RouteModel>()
       .Column( "chk", () => Html.Image( Url.Content( "down.gif" ), "Select or deselect tests" ),
                       (m) => "<input type='hidden' name='routeLinkId' value='"+ m.RouteLinkID +"' />" + Html.CheckBox( "drugRoute" + mc + m.RouteLinkID, m.IsChecked )
               )

.Column( "route clip-text", "Route", (m) => Html.Encode( m.Route ) )

.Column( "groups clip-text", "Groups", (m) => "" + Html.Encode(m.Group) + "" ) .ToGrid() ) %>

On clicking the image in header I need to display a flyout menu. The code for the flyout menu is below.

<div id="group-menu-<%= mc %>" class="flyout-menu" title="Select tests">
  <div>  
    <p>Select</p>
    <ul>
        <li><button type="button" name="one">One</button></li>        
        <li><button type="button" name="two">two</button></li>
    </ul>
    <p>Unselect</p>
    <ul>       
        <li><button type="button" name="unselect-one">one</button></li>
        <li><button type="button" name="unselect-two">two</button></li>
    </ul>
  </div>  
</div>

Now how do I display this menu on clicking the image in header.