JSFiddle - React, Tailwind, and code Playground

by dkalinkov93

HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Minimalistic Dropdown Menu</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <section class="navigation">
        <ul>
            <li class="menu">
                <a href="#">Menu Item 1</a>
            </li>
            <li class="menu">
                <a href="#">Menu Item 2</a>
                <ul>
                    <li><a href="#">Menu Item 2.1</a>
                        <ul>
                            <li><a href="#">Menu Item 2.1.1</a></li>
                            <li><a href="#">Menu Item 2.1.2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Menu Item 2.2</a>
                        <ul>
                            <li><a href="#">Menu Item 2.2.1</a></li>
                            <li><a href="#">Menu Item 2.2.2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="menu">
                <a href="#">Menu Item 3</a>
                <ul>
                    <li><a href="#">Menu Item 3.1</a></li>
                    <li><a href="#">Menu Item 3.1</a></li>
                </ul>
            </li>
        </ul>
    </section>
</body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

.navigation {
    font-family: 'Open Sans Condensed', sans-serif;
    background: #333;
    border-bottom: 5px solid #27d819;
    font-size: 1.3em;
}

    .navigation ul, .navigation li {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    .navigation ul {
        text-transform: uppercase;
    }

    .navigation .menu {
        display: inline-block;
    }

     .navigation ul li:hover {
        position: relative;
    }

        .navigation ul li:hover > a {
            background: #27d819;
        }

        .navigation ul li:hover > ul {
            visibility: visible;
        } 

    .navigation ul ul {
        border-top: 5px solid #27d819;
        min-width: 105%;
        visibility: hidden;
        position: absolute;
        top: 100%;
        bottom: 0px;
        left: 0px;
    }

        .navigation ul ul a {
            padding: 16px 20px;
            line-height: 150%;
        }

        .navigation ul ul ul {
            border-top: 0px;
            left: auto;
            right: -105.5%;
            top: 0px;
        }

.menu a {
    background: #333;
    color: #e5e5e5;
    display: block;
    text-decoration: none;
    padding: 0px 25px;
}

.menu > a {
    line-height: 50px;
}