JSFiddle - React, Tailwind, and code Playground

by RenaissanceDesign

HTML

<header>
<nav>
                <ul>
                    <li><a href="#">Main Nav Item 1</a></li>
                    <li><a href="#">Main Nav Item 2</a>
                        <ul>
                            <li><a href="#">Drop Down Menu Item 1</a></li>
                            <li><a href="#">Drop Down Menu Item 2</a></li>
                            <li><a href="#">Drop Down Menu Item 3</a></li>
                            <li><a href="#">Drop Down Menu Item 4</a></li>
                            <li><a href="#">Drop Down Menu Item 5</a></li>
                            <li><a href="#">Drop Down Menu Item 6</a></li>
                            <li><a href="#">Drop Down Menu Item 7</a></li>
                            <li><a href="#">Drop Down Menu Item 8</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Main Nav Item 3</a>
                        <ul>
                            <li><a href="#">Drop Down Menu Item 1</a></li>
                            <li><a href="#">Drop Down Menu Item 2</a></li>
                            <li><a href="#">Drop Down Menu Item 3</a></li>
                            <li><a href="#">Drop Down Menu Item 4</a></li>
                            <li><a href="#">Drop Down Menu Item 5</a></li>
                            <li><a href="#">Drop Down Menu Item 6</a></li>
                            <li><a href="#">Drop Down Menu Item 7</a></li>
                            <li><a href="#">Drop Down Menu Item 8</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Main Nav Item 4</a></li>
                    <li><a href="#">Main Nav Item 5</a></li>
                    <li><a href="#">Main Nav Item 6</a></li>
                    <li><a href="#">Main Nav Item 7</a></li>
                </ul>
            </nav>

</header>

CSS

header nav {
        background-image: url(../_images/nav-bar-bg.png);
        height: 48px;
        width: 960px;
        position: absolute;
        top: 96px;
}

header nav ul {
        height: 48px;
        width: 960px;
}

header nav ul li {
        float: left;
        position: relative;
        line-height: 48px;
        font-size: 1.6em;
        width: auto;
        margin-right: 30px;
        margin-left: 30px;
}

header nav ul li a {
        text-align:center;
        color: #FFF;
        display:block;
}

header nav ul li a:hover {
        color: #09b497;
}

header nav ul ul  {
        position:absolute;
        visibility: hidden;
        top:48px;
        height:auto;
        border:2px solid #0a7c6c;
        background-color:#FFF;
}

header nav ul li:hover ul  {
        visibility: visible;
        
}

header nav ul li:hover ul li {
        margin:0 0px;
        padding: 0 6px;
        display:block;
        float:left;
        clear:left;
}

header nav ul li:hover ul li a{
        display:block;
        line-height:24px;
        text-align:center;
        font-size:14px;
        color:#0a7c6c;
        background-color:#F00;
}