JSFiddle - React, Tailwind, and code Playground

by il kamil

HTML

<div id="nav">
            <div id="nav_wrapper">
                <ul>
                    <li>
                    <a href="#">Admin <img src="" /></a>
                        <ul>
                            <li><a href="#">Adicionar Eventos</a></li>
                            <li><a href="#">Actualizar Eventos</a></li>
                            <li><a href="#">Eliminar Eventos</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>

CSS

body{
        padding:0;
        margin:0;
        overflow-y:scroll;
        font-family:Arial;
        font-size:18px;
    }

    #nav{
        background-color:#333;
    }

    #nav_wrapper{
        float:left;
        margin:0 auto;
        text-align:left;  
    background-color:#333;
    }

    #nav ul{
        list-style-type:none;
        padding:0;
        margin:0;
        position:relative;  
    }

    #nav ul li{
        display:inline-block;
    }

    #nav ul li:hover{
        background-color:#333;      
    }

    #nav ul li img{
        vertical-align:middle;
        padding-left:5px;
    }

    #nav ul li a,visited{
        color:#ccc;
        display:block;
        padding:15px;
        text-decoration:none;   
    }

    #nav ul li a:hover{
        color:#ccc;
        text-decoration:none;
    }

    #nav ul li:hover ul{
        display:block;
    }

    #nav ul ul{
        display:none;
        position:absolute;
        background-color:#333;
        border: 5px solid #222;
        border-top:0;
        margin-left:-5px;
        min-width:200px;
    }

    #nav ul ul li{
        display:block;  
    }

    #nav ul ul li a,visited{
        color:#ccc; 
    }

    #nav ul ul li a:hover{
        color:#099;
    }