Typo3 Dropdown with three layers

Question

I have to implement a dropdown menu which looks like this:

MenuItem
   Section1
      Article1
      Article2
   Section2
      Article3
      Article4
      etc.

There are three layers:

  Layer1: MenuItem
  Layer2: Section1, Section2
  Layer3: ArticleX

If I hover over 'MenuItem' it should expand and show the other two layers. But the third layer should be a little intendet.

I'm using Typo3 6.0.1. I hope my question is clear to you.

Regards

Answer 1

Try the below typoscript:

lib.content_left = COA
lib.content_left {
10 = HMENU
10 {
    wrap = <div class="menu_left menu_ul">|</div>
    entryLevel = 0
    1 = TMENU
    1 {
        wrap = <div class="menu_1"><ul>|</ul></div>
        target = _top
        NO {
            wrapItemAndSub = <li>|</li>|*|<li>|</li>|*|<li class="last">|</li>
        }
        ACT < .NO
        ACT = 1
        CUR < .NO
        CUR = 1
        CUR {
            allWrap = <div class="menu_act">|</div>
        }
    }
    2 = TMENU
    2 {
        expAll = 0
        wrap = <div class="menu_2"><ul>|</ul></div>
        target = _top
        NO {
            wrapItemAndSub = <li>|</li>
        }
        ACT < .NO
        ACT = 1
        CUR < .NO
        CUR = 1
        CUR {
            allWrap = <div class="menu_act">|</div>
        }
    }
    3 = TMENU
    3 {
        expAll = 1
        wrap = <div class="menu_3"><ul>|</ul></div>
        target = _top
        NO {
            wrapItemAndSub = <li>|</li>
        }
        ACT < .NO
        ACT = 1
        CUR < .NO
        CUR = 1
        CUR {
            allWrap = <div class="menu_act">|</div>
        }
    }
}
}

The hover effects needs to be done via css or javascript.

Reference link: http://typo3buddy.com/typoscript/menus/tmenu-left-menu/