JSFiddle - React, Tailwind, and code Playground

HTML

<aside>
<ul>
<li><a href="">Menüpunkt1</a href=""></li>
<li><a href="">Menüpunkt2</a href="">
<ul>
 <li><a href="">Menüpunkt2.1</a href=""></LI>
</UL>
</li>
<li><a href="">Menüpunkt3miteinemsehrlangenTextderüberstehensollundmitderScrollbarangeschautwerdenkann</a href=""></li>
<li><a href="">Menüpunkt4</a href=""></li>
</ul>
</aside>

CSS

aside {
 display:flex;
 width:15rem;
 overflow:auto;
}
ul {
 padding:0;
 margin:0;
}

ul a {
 display:block;
 padding:5px;
}

li {
 background:#eee;

}

ul ul {
 padding-left:20px;
 list-style:none;
}
li:nth-child(odd) {
 background:#ddd;
}
li li:nth-child(odd) {
 background:#ada;
}