Typoscript HMENU 下拉菜单不起作用,<li>-标签提前关闭

Typoscript HMENU drop down is not working, <li>-Tag closes to early

得到以下 - 减少到最低限度 - 代码:

CSS:

    html {
    height: 100%;
    }
     
    body {
    height: 100%;
    font-size: 1.5em;
    line-height: 1.5;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    }
     
     
    a, a:link, a:active, a:visited {
    color: #e23427;
    text-decoration: none;
    }
     
    li {
    list-style: none;
    }
     
    /**1. Ebene Hauptnavigation**/
    ul.topNav {
    float: left;
    width: 700px;
    margin: 100px 0 0 40px;
     
    }
    ul.topNav li {
    float: left;
    position: relative;
    }
    ul.topNav li a.tmp {
    color: inherit;
    float: left;
    height: 20px;
    padding: 0 10px;
    }
    ul.topNav li a:hover.tmp,
    ul.topNav li.active a.tmp,
    ul.topNav li:hover a.tmp {
    border-bottom: 2px solid #e23427;
    padding-bottom:10px;
    color: #e23427;
    }
     
    /**2. Ebene Hauptnavigation**/
    ul.topNav li ul {
    display: none;
    position: absolute;
    width: 190px;
    top: 32px;
    left: -2px;
    padding: 5px 2px 2px 2px;
    }
    ul.topNav li:hover ul {
    display: block;
    }
    ul.topNav li ul li {
    float: none;
    display: block;
    width: 190px;
    height: auto;
    vertical-align: middle;
    }
    ul.topNav li ul li a {
    display: block;
    color: #231f20;
    width: 146px;
    padding: 6px 22px;
    }
    ul.topNav li ul li a:hover,
    ul.topNav li ul li a.active {
    color: red;
    }
     
    /***3. Ebene Hauptnavigation***/
    ul.topNav li:hover ul li ul {
    display: none;
    position: absolute;
    width: 190px;
    left: 188px;
    padding: 0 2px 2px 2px;
    margin-top: -32px;
    }
    ul.topNav li.eb3Left:hover ul li ul {
    left: -192px;
    }
    ul.topNav li a:hover ul li ul {
    display: none;
    }
    ul.topNav li ul li ul {
    display: none;
    }
    ul.topNav li ul li:hover ul {
    display: block;
    }
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style/testCssNavigation.css" media="screen" />
    </head>
     
    <body>
    <div>
    <ul class="topNav">
    <li><a href="" class="tmp">Company</a>
     
    <ul>
    <li><a href="">Facts</a></li>
    <li><a href="">Overview</a></li>
    <li><a href="">Management</a></li>
    </ul>
    </li>
    <li><a href="" class="tmp">Products</a>
     
    <ul>
    <li><a href="">Product Line</a>
    <ul>
    <li><a href="">Product1</a></li>
    <li><a href="">Product2</a></li>
    <li><a href="">Product3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>

效果如您所见: 一二三级也是。

通过将其集成到 Typo3 中,我为菜单编写了以下 TS:

    ## Menu [Begin]
    lib.mainnav = HMENU
    lib.mainnav {
    entryLevel = 1

    1 = TMENU
    1 {
    wrap = <ul class="topNav">|</ul>
    expAll = 1
    noBlur = 1

    ##Menuelements normal
    NO = 1
    NO.allWrap = <li>|</li>
    NO.ATagParams = class="tmp"
    NO.stdWrap.htmlSpecialChars = 1

    CUR = 1
    CUR.allWrap = <li>|</li>
    CUR.ATagParams = class="tmp"
    CUR.stdWrap.htmlSpecialChars = 1
    }

    2 = TMENU
    2 {
    wrap = <ul>|</ul>
    expAll = 1
    noBlur = 1

    NO = 1
    NO.wrapItemAndSub = <li>|</li>
    NO.stdWrap.htmlSpecialChars = 1

    CUR = 1
    CUR.wrapItemAndSub = <li>|</li>
    CUR.stdWrap.htmlSpecialChars = 1

    ACT = 1
    ACT < .CUR
    }
    ## referenz auf ebene 2, alles wie ebene 2
    3 < .2
    3.wrap = <ul>|</ul>
    }
    ## Menu [End]

通过Typo3,我只能看到一级菜单,没有Drop Down,也没有第三级。生成的代码如下:

    <div>
    <ul class="topNav">
    <li>
    <a href="index.php?id=112" class="tmp">Company</a>
    </li>
    <ul>
    <li>
    <a href="index.php?id=119">Facts</a>
    </li>
    <li>
    <a href="index.php?id=120">Overview</a>
    </li>
    <li>
    <a href="index.php?id=121">Management</a>
    </li>
    </ul>
     
    <li>
    <a href="index.php?id=114" class="tmp">Products</a>
    </li>
    <ul>
    <li>
    <a href="index.php?id=126">Product Line</a>
    </li>
    </ul>
    </ul>
    </div>

三级菜单完全没有了 第一级有一个关闭 -Tag 紧随其后,但据我所知应该在第二级和第三级菜单之后关闭。

我在这个 Nerd 场景中还很陌生 ;-) 所以如果我做错了什么,请道歉。如果有人可以帮助,那将是很棒的,现在正在解决这个问题……好几天了。 :-)

只有部分答案,针对第一级菜单的问题:您正在使用 allWrap 添加 <li> 标签,它只包装菜单项,不包装子菜单。请改用 wrapItemAndSub,就像您在第二级菜单中所做的那样。 Link to documentation.

此外,TypoScript 中的一些缩进会很好。

@Jost:我终于找到了 post 带有缩进代码的正确位置! :-)

这是完美运行的最终 TS 代码:

## Menu [Begin]
lib.mainnav = HMENU
lib.mainnav {

  entryLevel = 1

  1 = TMENU
  1 {
    wrap = <ul class="topNav">|</ul>
    expAll = 1
    noBlur = 1
    NO.wrapItemAndSub = <li>|</li>
    NO.ATagParams = class="tmp"
  }
 

  2 = TMENU
  2 {
    wrap = <ul>|</ul>
    expAll = 1
    noBlur = 1
    NO.wrapItemAndSub = <li>|</li>
  }

  3 = TMENU
  3 {
    wrap = <ul>|</ul>
    expAll = 1
    noBlur = 1
    NO.wrapItemAndSub = <li>|</li>
  }
}
## Menu [End]