JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<h1 align="center"><font face="Comic Sans MS"> Willkommen bei &#8859;<span><i>FeliBaby</i></span></font></h1>
<br>
<br> 
<div>
<hr>
   <ul>
      <li><a href="#">Spielen</a>
          <ul>
            <li><a href="Badespielzeug.html">Badespielzeug</a></li>  
            <li><a href="Beiß_und_Greifringe.html">Beiß- und Greifringe</a></li>
            <li><a href="Spielbögen.html">Spielbögen</a></li>
            <li><a href="Babytücher.html">Babybücher</a></li>
          </ul>
      </li>
      <li><a href="#">Nahrung</a><ul>
            <li><a href="Babybrei_Alete.html">Babybrei von Alete</a></li>  
            <li><a href="Babybrei_Hipp.html">Babybrei von Hipp</a></li>
           
          </ul>
      <li><a href="#">Babymode</a>
          <ul>
             <li><a href="Strampler.html">Strampler</a></li>
             <li><a href="Body.html">Body</a></li>
             <li><a href="Unterwäsche.html">Unterwäsche</a></li>
          </ul>
      </li>
      <li><a href="#">Kindermode</a>
            <ul>
              <li><a href="T-Shirts.html">T-shirts</a></li>
              <li><a href="Babyschuhe.html">Schuhe</a></li>
              <li><a href="Baby_Jacken.html">Jacken</a></li>
              <li><a href="Baby_Hosen.html">Hosen</a></li>
            </ul>
      </li>
      <li><a href="#">About</a></li>     
   </ul>
   <br>
   <br>
   <br>
   <hr>
</div>
<table> <tr>
 <td><img src="http://placehold.it/350x250" alt="Can´t load picture Baby1" style="width:350px;height:250px;"></td>
 <td><img src="http://placehold.it/350x250" alt="Can´t load picture Baby2" style="width:350px;height:250px;"></td>
 <td><img src="http://placehold.it/350x250g" alt="Can´t load picture Baby3" style="width:350px;height:250px;"></td>
 <td><img src="http://placehold.it/350x250" alt="Can´t load picture Baby7" style="width:350px;height:250px;"></td>
</tr></table>
<table><tr>
 <td><img src="http://placehold.it/350x250" alt="Can´t load picture Baby4" style="width:350px;height:250px;"></td>
...

CSS

ul {
   
margin:0px; padding:0px;  
   
}
 
ul li a {
    text-decoration:none;
    color:white;
    display:block;
}
 
ul li{
   
list-style:none;  
float:left;  
width:150px;
background-color:black;
color:white;
font-size:20px;
line-height:50px;
text-align:center;
opacity:.5;
border:1px solid #285189;
position:relative; 
   
}
 
ul li a:hover {
    background-color:orange;
}
ul li ul { /* ohne li am Ende */
    
    display:none;
    position:absolute;   
}
ul li:hover ul { /* ohne li am Ende */
   
    display:block;
   
}