Edit/Delete option in HoverMenuExtender is not pointing to the particular row

Hi,

Please help me with this problem. Attached code below.

<asp:Panel ID="pnlModifyData" CssClass="saplePanel" runat="server" Style="display: none"><div style="float: right"><asp:ImageButton ID="imgbtnClosePopup" runat="server" ImageUrl="~/Images/White_Close.png" /></div><div style="margin: 5% 15% 10% 15%"><asp:GridView ID="gvData" OnRowDataBound="gvData_RowCreated" OnRowCreated="gvData_RowCreated" Style="text-align: center" runat="server" DataSourceID="sqlDSModifyData"><Columns><asp:TemplateField HeaderStyle-Width="0px"><ItemTemplate><asp:Panel ID="popupMenu" runat="server" Style="display:none"><div style="border: 1px outset white; padding: 2px;"><div><asp:LinkButton ID="lnkButtonEdit" runat="server" CommandName="Edit" Text="Edit" /></div><div><asp:LinkButton ID="lnkButtonDelete" runat="server" CommandName="Delete" Text="Delete" /></div></div></asp:Panel><asp:Panel ID="pnl9" runat="server"><table width="100%"><tr><td width="auto"><asp:Label ID="lblSlno" runat="server" Text='<%#Eval("Margin_Slno") %>' /></td><td width="auto"><asp:Label ID="lblDate" runat="server" Text='<%#Eval("Margin_Date") %>' /></td><td width="auto"><asp:Label ID="lblProjectID" runat="server" Text='<%#Eval("Margin_ProjectID") %>' /></td><td width="auto"><asp:Label ID="lblProductCode" runat="server" Text='<%#Eval("Margin_ProductCode") %>' /></td><td width="auto"><asp:Label ID="lblMargin" runat="server" Text='<%#Eval("Margin_ExpMargin") %>' /></td></tr></table></asp:Panel><Ajax:HoverMenuExtender ID="hoverMenu" runat="server"
                                PopupControlID="popupMenu"
                                PopupPosition="Right"
                                HoverCssClass="popupHover"
                                TargetControlID="pnl9"
                                PopDelay="25" /></ItemTemplate><EditItemTemplate><asp:Panel ID="popupMenu" runat="server"><div style="border: 1px outset white; padding: 2px;"><div><asp:LinkButton ID="lnkButtonUpdate" runat="server" CommandName="Update" Text="Update" /></div><div><asp:LinkButton ID="lnkButtonCancel" runat="server" CommandName="Cancel" Text="Cancel" /></div></div></asp:Panel><Ajax:HoverMenuExtender ID="hoverMenu" runat="server" PopupControlID="popupMenu"
                                PopupPosition="Left" HoverCssClass="popupHover" TargetControlID="popupMenu"
                                PopDelay="50" /></EditItemTemplate></asp:TemplateField></Columns></asp:GridView></div></asp:Panel><Ajax:ModalPopupExtender ID="mpeModifyData" runat="server" BackgroundCssClass="sample"
        TargetControlID="imgbtnModify" CancelControlID="imgbtnClosePopup" PopupControlID="pnlModifyData"></Ajax:ModalPopupExtender><asp:SqlDataSource ID="sqlDSModifyData" runat="server" ConnectionString="<%$ ConnectionStrings:VLConnectionString %>"
        SelectCommand="SELECT * FROM [Velan].[dbo].[Margin]"></asp:SqlDataSource><Ajax:RoundedCornersExtender ID="rceModifyData" runat="server" TargetControlID="pnlModifyData"
        Corners="All" Radius="10"></Ajax:RoundedCornersExtender>

Here, I am showing a ModalPopup on click of a button that displays a gridView which takes data from a datasource.

The problem is that when ever I point to a particular row "The position of the Edit/Delete is fixed to the top right corner.

Can someone help me to make the buttons display to the right of the particular row in gridView?

Thanks in advance

-Sai