JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    
            <ul>
                <li><a href="./index.html" target="_parent" class="current">Home</a></li>
                <li><a href="./programm.html" target="_parent">Programm & Preise</a></li>
                <li><a href="./kuenstler.html">Künstler</a></li>
                <li><a href="./rueckblick.html">Rückblick</a></li>
                <li><a href="./team.html" target="_parent">Team</a></li>
            </ul>
        
        </div> <!-- end of menu -->

CSS

/* menu */
#menu {
	clear: both;
	width: 670px;	
	height: 64px;
	background: url(images/menu_yellow.png) no-repeat bottom;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu ul li {
	padding: 0;
	margin: 0;
	display: inline;
}

#menu ul li a{
	float: left;
	display: block;
	width: 94px;
	height: 55px;
	padding: 7px 0 0 0;
	margin-right: 5px;
	text-align: center;
	font-size: 13px;
	text-decoration: none;
	color: #000;	
	font-weight: normal;
	outline: none;
	background: url(http://i.imgur.com/JYsyCl6.png) repeat;
	opacity: .7;
}

#menu li a:hover, #menu li .current{
	color: #C30;
	background: url(http://i.imgur.com/JYsyCl6.png) repeat;
	opacity: 1;
}