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 e 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.

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 e 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.

• javascript
• css
• html

• 4 When would you ever need that? What behavior are you looking for? An anchor is suppose to make everything inside it clickable, how would you know what Area is what? – Filip Ekberg Commented Feb 9, 2011 at 22:51
• 3 As far as I was aware, nesting anchor tags is invalid XHTML as well. The spec seems to agree, from what I can find (XHTML 1.1 does not appear to have changed this part of the spec). – eldarerathis Commented Feb 9, 2011 at 23:02
• @eldarerathis — technically it isn't invalid (since the XML DTDs can't express "Cannot have an a as a descendent at any level"), but it is non-conforming. – Quentin Commented Feb 9, 2011 at 23:13
• Apologies. I think I may have put the question badly. I've re-phrased it. – Mike Rifgin Commented Feb 9, 2011 at 23:17
• @FilipEkberg: Here's why you might need it. Say you have a bunch of divs on a homepage, each representing another page on your site. Each one has an image, a label, and a headline. HTML5 lets you wrap each whole div in an <a> element linking to the relevant page. But what if you want to make that label in the middle also clickable (to take you to a page listing all pages with that label)? HTML5 currently forbids this. – callum Commented Jan 16, 2012 at 18:12

2 Answers 2

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.

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, e.g. those with arthritis)