Structure of the component

PREV
NEXT

After you have inserted component into web page, in HTML code will be added tag <div id="JQDropMenu1" class="JQDropMenu">...</div>. This tag contains body of the navigation menu. The following example shows the simple HTML code of the HTML5 Dropdown menu:

<div id="JQDropMenu1" class="JQDropMenu">
  <div class="line"></div>
  <ul>
    <li class="selected"><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
      <ul>
        <li><a href="#">Sub menu 2.1</a></li>
        <li><a href="#">Sub menu 2.2</a>
          <ul>
            <li><a href="#">Sub menu 2.2.1</a></li>
            <li><a href="#">Sub menu 2.2.2</a></li>
            <li><a href="#">Sub menu 2.2.3</a></li>
          </ul>
        </li>
        <li><a href="#">Sub menu 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 3</a>
      <ul>
        <li><a href="#">Sub menu 3.1</a></li>
        <li><a href="#">Sub menu 3.2</a></li>
        <li><a href="#">Sub menu 3.3</a></li>
        <li><a href="#">Sub menu 3.4</a></li>
      </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</div>

Menu is realized with the help of <ul> and <li> tags, unordered list. Menu structure you can change with the help of Wizard (Select оbject tag, then click 'Edit menu' button in Dreamweaver 'Properties' panel), then open 'Menu structure' category.