JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<section>
        <header>
            <h1>Title</h1>
        </header>

        <nav id="navigation">
            <ul id="navMain">
                <li><a href="index.html">First</a></li>
                <li class="currentPage"><a href="#">Second</a></li>
                    <li><a href="#">Third</a>

                        <ul>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        </ul>
                    </li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                </ul>
        </nav>
        </section>

CSS

#navMain {
    height: 38px;
    list-style: none;
    font-family: tahoma;
    font-size: 12px;
    border-bottom: 1px LightBlue solid;
    float: right: width:940px;
    margin: 0;
    padding: 0;
    -moz-border-radius: 5px;
    4-webkit-border-radous: 5px;
}
#navMain > li {
    float: right;
    position: relative;
    border-right: 1px solid LightBlue;
}
#navMain > li > a {
    color: black;
    float: left;
    text-decoration: none;
    padding: 11px 18px;
    border-right: 1px solid LightBlue;
}
#navMain a {
    background: LightSteelBlue;
}
#navMain ul {
    display: none;
}
#navMain ul {
    display: none;
    position: absolute;
    list-style: none;
    left: 0;
    padding: 0;
    margin: 0;
    border-top: 1px LightBlue solid;
    background: LightSteelBlue;
}
#navMain ul li a {
    color: black;
    text-decoration: none;
    display: block;
    padding: 6px 7px;
    border-bottom: 1px solid LightBlue;
    border-left: 1px solid LightBlue;
    border-right: 1px solid LightBlue;
    font-size: 13px;
}
#navMain li:hover ul {
    display: block;
    top: 39px;
    min-width: 200px;
}