Reply To: Submenu formatting

[admin]

Ah, then neglect my previous post. If you would like to include custom HTML code inside your sub menus, you can use mega drop-downs. The last sub menu on the default demo page (“demo/index.html” in the download ZIP) is a mega drop down:

http://vadikom.github.io/smartmenus/src/demo/

So you would have something like this:

<div class="level1">
  <ul class="sm level1">
    <li><a href="#">Main menu item 1</a>
      <ul class="mega-menu">
        <li>
          <div class="menu2">
            <div class="column">
              <ul>
                <li>
                  <a href="#">Item 2</a>
                </li>

                <li>
                  <a href="#">Item 3</a>
                </li>
              </ul>
            </div>

            <div class="column">
              <ul>
                <li>
                  <a href="#">Item 4</a>
                </li>

                <li>
                  <a href="#">Item 5</a>
                </li>

                <li>
                  <a href="#">Item 6</a>
                </li>
              </ul>
            </div>

            <div class="clearboth"></div>
          </div>
        </li>
      </ul>
    </li>
    <li><a href="#">Main menu item 2</a>
      <ul class="mega-menu">
        <li>
          Mega drop down 2 content...
        </li>
      </ul>
    </li>
  </ul>
</div>

and the following CSS as a start for the nested lists inside the mega drop-downs:

.mega-menu ul {
	display: block;
	position: static;
}

because by default ul elements in the menu tree are considered actual sub menus and have display: none; applied in “sm-core-css.css”.