Hallo bobby,
Ne. Das hast du falsch verstanden... Hauptmenü und submenu verhalten sich richtig. Es ist eine kleine Linie dazwischen, die so breit sein soll wie der hauptmenüpunkt. Die habe ich bei hover über den Hauptpunkt mit :After erzeugt und bei hover über das submenu mit :before. Leider reagiert dies verschieden, obwohl es m.E. an der selben Stelle eingefügt wird. Siehe mein jsfiddle Beispiel
Deine Struktur ist folgende:
<li>
<a href="#">Unternehmen</a>
<a href="#" class="submenubutton"><img src="images/icons/Arrow_open_S.svg" /></a>
<ul>
<li>test</li>
</ul>
</li>
Deine Pseudolemente werden im Prinzip so eingefügt
<li>
<a href="#">Unternehmen</a>
<a href="#" class="submenubutton"><img src="images/icons/Arrow_open_S.svg" />
after-pseudoelement des Links
</a>
<ul>
before-pseudoelement der Liste
<li>test</li>
</ul>
</li>
Bis demnächst
Matthias