JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<header class="clearfix">
    <section class="wrapper">
        <div class="logo"></div>
        <nav>
            <ul>
                <li>
                    <a href="">lorem</a>
                    <ul>
                        <li><a href="">lorem </a></li>
                        <li><a href="">lorem</a></li>
                        <li><a href="">lorem</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">lorem</a>
                </li>
                <li>
                    <a href="">lorem</a>
                    <ul>
                        <li><a href="">lorem 2</a></li>
                        <li><a href="">lorem 2</a></li>
                        <li><a href="">lorem 2</a></li>
                    </ul>
                </li><li>
                    <a href="">lorem</a>
                </li><li>
                    <a href="">lorem</a>
                </li>
            </ul>
        </nav>
    </section>
</header>

CSS

header{
    background:#333;
    padding:5px;
    position:relative;
    width:100%;
}
.wrapper{
    width: 500px;
    margin: 0 auto;
    display: block;
}
.logo{
    width:100px;
    height:100px;
    background:#ccc;
    position:absolute;
    left:10px;
    top:0;
    z-index:10;
}
nav{
    float:right;
}
nav ul{
    list-style:none;
}
nav li{
    display:inline-block;
    margin:0 2px;
}
nav > ul > li{
    position:static;
}
nav > ul > li > a{
    color:#fff;
    text-decoration:none;
    padding:0 5px;
}
nav > ul > li > ul{
    position:absolute;
    width:100%;
    background:rgba(0,0,0,0.5);
    text-align:center;
    left: 0;
    top: 50px;
    visibility: hidden;
    opacity:0;
    transition:0.3s;
    -webkit-transition:0.3s;
}
nav > ul > li > ul a{
    color:#fff;
    text-decoration:none;
    padding:5px;
    display:block;
}

/*Hover */
nav > ul > li:hover > ul{
    top:60px;
    opacity:1;
    visibility: visible;
}

.clearfix{*zoom:1;}.clearfix:after{clear:both}.clearfix:before,.clearfix:after{content:" ";display:table}