JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
    <ul class="nav">
        <li class="link">
            <a class="main" href="#m1">Main</a>
            <ul class="sub">
                <li><a href="#1">test1</a></li>
                <li><a href="#2">test2</a></li>
                <li><a href="#3">test3</a></li>
                <li><a href="#4">test4</a></li>
            </ul>
        </li>
        <li class="link">
            <a class="main" href="#m2">Main</a>
            <ul class="sub">
                <li><a href="#1">test1</a></li>
                <li><a href="#2">test2</a></li>
                <li><a href="#3">test3</a></li>
                <li><a href="#4">test4</a></li>
            </ul>
        </li>
        <li class="link">
            <a class="main" href="#m3">Main</a>
            <ul class="sub">
                <li><a href="#1">test1</a></li>
                <li><a href="#2">test2</a></li>
                <li><a href="#3">test3</a></li>
                <li><a href="#4">test4</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

.nav,
.nav ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
.nav a {
    text-decoration:none;
}
/*IE5 list fix*/
.nav .sub li {float:left;}
.nav .sub > li {float:none;}
#navigation {
    position:relative;
    height:25px;
    background:#ebebeb;
    z-index:10;
}
.nav {
    position:relative;
    visibility:hidden;
}
.nav .link {
    width:300px;
    margin-top:-10075px;
    float:left;
}
.nav a {
    position:relative;
    display:block;
    height:25px;
    line-height:25px;
    text-decoration:none;
    color:#000;
    z-index:10;
    visibility:visible;
}

.nav .sub a {
    background:orange;
    margin:0 -1px 0 0;
    width:300px;
}
.nav .sub {
    float:left;
    background:#F90;
    padding-top:25px;
    margin-top:-25px;
}
.nav a.main {
    width:300px;
    height:25px;
    line-height:25px;
    margin-top:10075px;
    margin-right:-299px;
    float:left;
}
.nav a.main:hover, .nav a.main:focus, .nav a.main:active {
    margin-right:0;
    background:#000;
    color:#fff;
}
.nav .sub a:hover, .nav .sub a:focus, .nav .sub a:active {
    margin:0 0 0 0;
    background:#333;
    color:#fff;
}
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/
a, a:hover, a:active, a:focus {}
/*Opera fix*/
.sub:hover {
    clear:both;
}