JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainNav"> 
<ul>
    <li class="parent"><a class="parent" href="#"><span>Ohne Abschnittsüberschrift</span></a>
        <ul>
            <li class="parent"><a class="parent" href="#"><span>1</span></a>
                <ul>
                    <li><a href="#"><span>1.1</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>2</span></a>
                <ul>
                    <li><a href="#"><span>2.1</span></a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="sectionheader"><span>Mit Abschnittsüberschrift</span>
        <ul>
            <li class="sectionheader"><span>1</span>
                <ul>
                    <li><a href="#"><span>1.1</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span>2</span></a>
                <ul>
                    <li><a href="#"><span>2.1</span></a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

CSS

@charset "utf-8"; 
* {
    margin: 0;
    padding: 0;
    list-style-type:none;
}
body {
    font: 75%/165% Arial, Helvetica, sans-serif;
}
#mainNav {
    height:46px;
    background: #007035;
    z-index:100;
}
#mainNav ul    {
    position:relative;
    line-height:1.5em; 
    z-index:10;
}
#mainNav ul li.sectionheader,
#mainNav ul a    {
    display:block;
    padding: 14px 22px 14px 22px;
    color: #dedede;
    text-transform:uppercase;
}
#mainNav ul li    {
    float:left;
    position:relative;
}
#mainNav ul li.parent a, #mainNav ul li.sectionheader    {
    padding-right:30px;
}
#mainNav ul ul {
    position:absolute;
    display:none;
    width:20em;
    top:3.8em;
    z-index:9;
}
#mainNav ul li ul a, 
#mainNav ul li ul .sectionheader    {
    width:14em;
    height:auto;
    float:left;
    background:#007035;
    padding: 11px 22px 11px 22px;
}
#mainNav ul li ul ul {
    left:18.3em;
/*    NEU */    
    top:0;
}
#mainNav ul li.sectionheader ul ul {
    left:17.3em;
}
/* ende neu */

#mainNav ul li:hover ul ul, 
#mainNav ul li:hover ul ul ul, 
#mainNav ul li:hover ul ul ul ul{
    display:none;
}
#mainNav ul li:hover ul, 
#mainNav ul li li:hover ul, 
#mainNav ul li li li:hover ul, 
#mainNav ul li li li li:hover ul{
    display:block;
}