DIVS not validating when used in a custom ASP:Menu

Question

My Code below is generated from a StaticItemTemplate in an ASP:Menu.

The code and the link does as it pleases, however it fails validation.

Output code is as follows

<li>
    <a class="level1 StaticMenuItemStyle" href="/Services.aspx">
    <div class="StaticMenuItemStyle"
         onmouseover="style.backgroundColor=&#39;#0088CB&#39;;style.color=white;"
         onmouseout="style.backgroundColor='';"
         style="color:Color [Blue];width:180px;">
         <a href="/Services.aspx" class="StaticMenuItemStyle">Services</a>
         <br />
         <div style="background-color: Blue; width: 180px;height: 5px;"></div>
    </div>
    </a>
</li>

however this errors on W3Validator

  Line 84, Column 63: document type does not allow element "div" here; missing one of  
  "object", "ins", "del", "map", "button" start-tag
  style="color:Color [Blue];width:180px;">

  The mentioned element is not allowed to appear in the context in which you've placed
  it; the other mentioned elements are the only ones that are both allowed there and 
  can contain the element mentioned. This might mean that you need a containing      
  element, or possibly that you've forgotten to close a previous element.

  One possible cause for this message is that you have attempted to put a block-level
  element (such as "<p>" or "<table>") inside an inline element (such as "<a>", 
  "<span>", or "<font>").

However if i replace the DIV with a span it validates. but doesnt look right. Anyone got any ideas how to get round this ?

Answer 1

Inside a "a" tag, div is not validate, because div is a basically block section and default style is section block. http://webdesign.about.com/od/htmltags/a/aa011000a.htm. But for anchor tag, it is same like as span. You can use onclick attribute on the div attribute or use .click function by jquery. You can use it like below:

<li>
    <a class="level1 StaticMenuItemStyle" href="/Services.aspx">
    <span class="StaticMenuItemStyle" style="display:block;" 
         onmouseover="style.backgroundColor=&#39;#0088CB&#39;;style.color=white;"
         onmouseout="style.backgroundColor='';"
         style="color:Color [Blue];width:180px;">
         <a href="/Services.aspx" class="StaticMenuItemStyle">Services</a>
         <br />
         <div style="background-color: Blue; width: 180px;height: 5px;"></div>
    </span>
    </a> </li>

Mention the jquery is initialize before the script