JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="steuerungunten">
    <ul>
        <li><a href="xxx.htm">Aaaa</a></li>
        <li><a href="xxx.htm">Bbbb</a></li><!-- </li> hatte hier gefehlt -->
        <li><a href="xxx.htm">Cccc</a></li>
        <li><a href="xxx.htm">Dddd</a></li>
    </ul>
    <nav id="steuer2">
        <p>
            <a rel="nofollow" href="http://www.imdb.com/name/nm4125422/" target="_blank">
                <img src="bilder/imdb.png" width="50" height="24" alt="IMDb" />
            </a>
        </p>
    </nav><!-- </nav> hatte hier gefehlt -->
</nav>

CSS

body{
    background:#000;
}

#steuer2 { /*TEST*/background:#FFFF7F;

}
#steuer2 a img {
    float: left;
    margin-right: 20px;
    margin-left: 250px;
}
#steuer2 a {
    /*font-size: 11pt;*/
    display: block;
    width: 90px;
    /*background: yellow; */
    float: left;
    /*border-left: 1px solid red; */
    text-align: center;
    line-height: 32px;
    color: #FFF;
    text-decoration: none;
}

#steuerungunten { /*TEST*/background:#000080;
    /*background-color: red; */
    background-image: url(bilder/balken_unten.png);
    height: 32px;
    border-top: 1px solid #5f5c16;
}
#steuerungunten ul {
    list-style-type: none;
}
#steuerungunten li {
    display: inline;
}
#steuerungunten a { /*TEST*/background:#008000;
    font-size: 11pt;
    display: block;
    width: 90px;
    /*background: yellow; */
    float: left;
    /*border-left: 1px solid red; */
    text-align: center;
    line-height: 32px;
    color: #FFF;
    text-decoration: none;

    text-shadow: 0px 0px 0px #e6e6a8;

	-webkit-transition: all 800ms ease-in;
	-moz-transition: all 800ms ease-in;
	-ms-transition: all 800ms ease-in;
	-o-transition: all 800ms ease-in;
	transition: all 800ms ease-in;
}
#steuerungunten a:hover {
    background-color: rgba(255, 233, 0, 0.2);

	-webkit-transition: all 400ms ease-in;
	-moz-transition: all 400ms ease-in;
	-ms-transition: all 400ms ease-in;
	-o-transition: all 400ms ease-in;
	transition: all 400ms ease-in;;