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.