Can't nest links in html5?

Question

In xhtml I usually nest lists, close the tag then begin a new before the closing tag. This technique makes a the list structure clear when rendered without any css and it's a convenient structure for applying JS to.

Today I come up against a problem nesting links in a html5 document:

<header>
   <nav>
       <a href="#">A link</a>
       <a href="#">A link
           <ul>
               <li><a href="#">nested link</a></li>
               <li><a href="#">nested link</a></li>
               <li><a href="#">nested link</a></li>
           </ul>
       </a>
   </nav>
</header>

Which doesn't work. The nested list is nested in another a tag.

So a technique I used regularly in xhtml doesn't work in html5. My question is what do you do in the situation where you want to create a flyout menu? Is there a technique I can use in html5 to make it as easy as it is in xhtml? I know I can create this flyout menu without nested links but I liked the conciseness of the old method.

Answer 1

Build your menu structure in nested lists, and have the first element in every list be a link. Works just fine and you can make it look right in CSS.

Answer 2

I never want to make a flyout menu , but if a client cannot be convinced otherwise then:

• The list of links at the top level would be represented as a list, not a bunch of anchors directly under the nav element
• I would structure the DOM so a submenu would be represented as a list that appeared after a link, and not inside it.
• I would use JavaScript to handle the opening/closing since :hover is inadequate as it:
  • doesn't work with keyboard access or
  • allow time to pass after the point leaves the menu before closing it (it is hard not to wobble across the edges for some people, eg those with arthritis)