JSFiddle - React, Tailwind, and code Playground

by MrPumpkin22

HTML

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- www.phpied.com/conditianal-comments-block-downloads/ -->
    <!--[if IE]><![endif]-->

    <meta http-equiv="X-UA-Compatible" contant="IE=edge,chrome=1">

    <link rel="stylesheet" href="css/main.css" />

    <!--[if IE]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <title> onclick dropdown menu </title>
</head>
<body class="no-js">

    <div id="wrapper">
        <ul id="topnav">
            <li>
                <a href="#"> Work Category </a>

                <a href="#" class="plus" class="no-js"> + </a>

                <ul class="subnav">
                    <li><a href="#"> Link </a></a>
                    <li><a href="#"> Link </a></a>
                    <li><a href="#"> Link </a></a>
                    <li><a href="#"> Link </a></a>
                </ul>        
            </li>
        </ul>
    </div>

    <script src="js/scripts.js"></script>
</body>
</html>

CSS

#wrapper {
    width: 960px;
    margin: 0 auto;
}
ul {
    list-style-type: none;
    float: left;
    width: 200px;
    height: 32px;
    position: relative;
}
ul li a:first-child {
    display: block;
    width: 159px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    background: #11719f;
    color: #ffffff;
    font-weight: bold;
    position: relative;
}

ul li a:hover:first-child {
    background: #0c577b;
}
ul li a.plus {
    width: 36px;
    height: 32px;
    background: #7e921e;
    color: #ffffff;
    line-height: 32px;
    text-align: center;
    text-decoration: none;
    float: right;
    right: 0;
    top: 0;
    position: absolute;
}
ul li .plus:hover {
    background: #687917;
}
ul li > ul {
    display: none;
    float: left;
    width: 200px;
    height: 154px;
    background: #0b3c54;
    position: relative;
}
ul li > ul li a {
    width: 182px;
    height: 38px;
    margin-bottom: 5px;
    margin-left: 20px;
}
ul li > ul li a:first-child {
    margin-top: 5px;
}
.no-js ul li:hover > .subnav {
    display: block;
}

JavaScript

var removeNojs = document.getElementsByClassName('no-js').removeAttribute('no-js');