JSFiddle - React, Tailwind, and code Playground

by Arkkimaagi

HTML

<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css" type="text/css">
    </head>
    
<body>
        <ul class="nav">
        <li>home</li>
    <li>animals            
        <ul class="nav first">
                   <li><a href="cow.php">cow</a></li>
                <li>chicken</li>
                <li>horse</li>
                <li>pig</li>
                <li>sheep</li>
         </ul>
    <li>workshops        
        <ul class="nav first">
                   <li>alchemy</li>
                <li>blacksmith</li>
                <li>brewery</li>
                <li>carpenter</li>
                <li>kitchen</li>
                <li>tailor</li>
        </ul>
    </li>
    <li>combat        
        <ul class="nav first">
                   <li>equipment</li>
                <li>bestiary</li>
            </ul>
        </li>
    <li>calculators        
            <ul class="nav first">
                <li>cooking
                    <ul class="nav">
                        <li>bread</li>
                        <li>cheese</li>
                    </ul>
                </li>
                   <li>animals
                       <ul class="nav">
                           <li>cow</li>
                           <li>chicken</li>
                           <li>horse</li>
                           <li>pig</li>
                           <li>sheep</li>
                       </ul>
                   </li>
                <li>carpenter                     
                    <ul class="nav">
                           <li>cheese curdle</li>
                           <li>fishing rod</li>
                           <li>shaft</li>
                           <li>bed</li>
                       </ul>
                   </li>
                <li>potions                       
                    <ul class="nav">
                           <li>cheese</li>
                           <li>joy</li>
                           <li>fishing</li>
                 ...

CSS

.nav
{width:100%; height:30px; background-color:#999; text-align: center}

.nav ul 
{margin:0px; padding:0px;}

.nav ul li 
{display:inline; height:30px; float:left; list-style:none; margin-left:15px; position:relative;}

.nav li a
{color:#fff; text-decoration:none;}

.nav li a:hover
{text-decoration:underline;}

.nav li ul
{margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#999;}

.nav li:hover ul 
{display:block; width:160px; }

.nav li li
{list-style:none; display:list-item; width:100%; }

.nav li li a
{color:#fff; text-decoration:none;}

.nav li li a:hover
{text-decoration:underline;}