how to make whole menu bar item area clickable

Question

i 'm working with menu bar control. here is my css and design code:

css :

.Menu 
{ 
    background:transparent url(../images/blueslate_background.gif) repeat-x;
    text-align:center;
    font-family : "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size:12px;
    font-weight:bold;
    border: None 0px #fff !important;
}

.menuhover
{
     color:#fff;
     background:transparent url(../images/blueslate_backgroundOVER.gif) repeat-x left center;
     cursor:pointer;
}

design :

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MenuControl.ascx.cs" Inherits="MenuControl" %>
<link rel="stylesheet" href="css/Menu3.css" type="text/css" />
<div id="header" align="center" >
<table width="100%" cellpadding ="0" cellspacing ="0" align="center">
<tr>
<td align="center">
   <asp:Menu ID="Menu1" runat="server" Orientation ="Horizontal"  CssClass="Menu"
        ForeColor ="Black" Width="100%" ScrollDownText="">
     <StaticMenuItemStyle Height ="40px"/>
    <DynamicMenuItemStyle CssClass ="Menu" Height="30px" HorizontalPadding="10px"/>
    <dynamichoverstyle  CssClass ="menuhover"/>
    <StaticHoverStyle CssClass ="menuhover"/>
    </asp:Menu>
</td>
</tr>
</table>
</div>

i just want to make whole menu bar list item area clickable is it possible with jquery or javascript.

------------------------------------Updated-----------------------------------------------------

here is some example to make whole div clickable with jquery:

<script type="text/javascript" language="javascript">
$(document).ready(function(){                 
     $(".thumb").click(function(){
     window.location=$(this).find("a").attr("href");return false;
     });
});
</script>

------------------------------------Updated-----------------------------------------------------

solution :

    <script type="text/javascript" language="javascript">
$(document).ready(function() {                 
     $(".Menu").click(function(e) {
         window.location = $(e.target).find("a").attr("href");
         return false;
     });
});
</script>

Error occurs when i clicks original Menu Text Error:

Server Error in '/EasyWeb' Application.

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly. 

Requested URL: /EasyWeb/undefined

Version Information: Microsoft .NET Framework Version:2.0.50727.3053; ASP.NET Version:2.0.50727.3053

Answer 1

Maybe you want to check if "header" is clicked and then check what element has been clicked..

In this case you have to check, with JQuery for instance:

$('#header').on('click', function(e) {
    var what = $(e.target).html();
    $('#clicked').html("You have selected: " + what);
});

Take a look on this DEMO .
Or this one , more nice.

Edit

To check also href in a element, take a look here .

Edit2

$(document).ready(function() {                 
     $(".Menu").click(function(e) {
         window.location = $(e.target).find("a").attr("href");
         return false;
     });
});

Answer 2

You can provide a click handler for the elements with the .Menu class.

$(document).on("click", ".Menu", function(){
  alert("Menu clicked");
})