JSFiddle - React, Tailwind, and code Playground

HTML

<nav id='tabmenu'>
    <ul>
        <li><h2><a href='about.php' class='inactive'tabindex='4'>About</a></h2></li>
        <li><h2><a href='flash.php' class='inactive'tabindex='4'>Flash</a></h2></li>
        <li><h2><a href='writing.php' class='inactive'tabindex='4'>Writing</a></h2>
            <ul>
                <li>
                    <a href='#' class='inactive' id='tech' onClick='toggleWritingType(this)' tabindex='10'>Technical</a>
                    <a href='#' class='inactive' id='jour' onClick='toggleWritingType(this)'' tabindex='9'>Journalism</a>
                </li>
            </ul>
        </li>
        <li><h2><a href='design.php' class='inactive'tabindex='4'>Design</a></h2></li>
        <li><h2><a href='webs.php' id='active' tabindex='4'>Webs</a></h2>
            <ul>
                <li><a href='#' class='active' id='cobra' onClick='toggleSShots(this)' tabindex='9'>Cobra Cabana</a></li>
                <li><a href='#' class='inactive' id='hughes' onClick='toggleSShots(this)' tabindex='10'>Hughes, PhD</a></li>
                <li><a href='#' class='inactive' id='rasche' onClick='toggleSShots(this)' tabindex='11'>Rasche</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

#tabmenu {
    width: 985px;
    margin: 0 auto 10px;
    height: 40px;
    border-bottom: 1px #fff solid;
}
#tabmenu a{
    background-color: #000;
    color: #fff;
    width:150px;
    height:40px;
    line-height: 40px;
    float: right;
    text-align:center;
    text-decoration: none;
}
#tabmenu a.inactive:hover {
    color: #999;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -khtml-opacity: 0.7;
    -moz-opacity: 1;
}
#tabmenu a#active, #tabmenu ul a.active {
    background-color: #fff;
    color:#000;
}
#tabmenu ul ul {
    display: none;
}
#tabmenu li:hover > ul {
    display: block;
    top: 40px;
    position: fixed;
    height: 120px;
    width: 150px;
}