JSFiddle - React, Tailwind, and code Playground
HTML
<nav id="steuerungunten">
<ul>
<li><a href="index.htm">Startseite</a></li>
<li><a href="impressum.htm">Website</a></li>
<li><a href="sitemap.htm">sitmap</a></li>
</ul>
</nav>
<nav id="steuer2">
<p>
<a href="http://www.imdb.com/name/nm4125422/" target="_blank" >
<img src="bilder/imdb.png" width="50" height="24" title="IMDb" alt="IMDb" />
</a>
</p>
</nav>
CSS
body{
background:#000;
}
#steuerungunten {
/*background-color: red; */
background-image: url(bilder/botton-unten.jpg);
height: 32px;
border-top: 1px solid #5f5c16;
width: 500px;
float: left;
clear: both;
}
#steuer2 {
background-image: url(bilder/botton-unten.jpg);
float: right;
height: 32px;
border-top: 1px solid #5f5c16;
/*margin-right: 20px;
margin-left: 500px;*/
width: 400px;
}
#steuer2 p {
float: left;
}
#steuer2 a {
width: 90px;
/*background: yellow; */
float: left;
/*border-left: 1px solid red; */
text-align: center;
line-height: 32px;
/*text-decoration: none;*/
}
#steuer2 a img {
padding-top: 0.2em;
text-decoration: none;
}
#steuerungunten ul {
list-style-type: none;
}
#steuerungunten li {
display: inline;
}
#steuerungunten 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;
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;;
}