Sometimes, the HTML inside a popup menu can get quite complicated. In this case, it's desirable that it doesn't behave like a menu item anymore, that is: it shouldn't get “hover” or “active” states, it should be skipped by keyboard navigation keys such as “up arrow” and “down arrow”, etc.

This page demonstrates how you can embed really complicated stuff into a menu. It's a normal menu which has some normal menu items—they will behave as usual. And inside it there is a piece of HTML code which contains a form with a nested table, labels, input fields, submit buttons, paragraphs, etc.

The way to do this is to embed the HTML in a DIV. Therefore, you have:

  1. The <LI> element, which defines the start of a menu item. This is required and has still to be present, even for such complicated HTML.
  2. Inside the <LI> you directly put a <DIV> element. When DynarchMenu sees a DIV element, it will ignore all the rest and make this item an “html popup” item.
  3. You can put whatever you want in the DIV element.

Do not try to include a submenu to an html item. It will not work.

Another thing to consider is that, this demo shows that you can combine normal menu items with full HTML menu items. But you're in no way required to do that—you can of course have a submenu which is entirely formed out of one (or more) HTML items. We don't like restrictions ;-)