JSFiddle - React, Tailwind, and code Playground

by Burkhard GS

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />
        <title>PAGETITLE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>
        <nav id="main_navigation">
            <ol>
                <li>
                    <a href="#">NavLink 1</a>
                    <ol class="dropdown">
                        <li><a href="#">NavLink 1.1</a></li>
                        <li><a href="#">NavLink 1.2</a></li>
                        <li><a href="#">NavLink 1.3</a></li>
                        <li><a href="#">NavLink 1.4</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">NavLink 2</a>
                    <ol class="dropdown">
                        <li><a href="#">NavLink 2.1</a></li>
                        <li><a href="#">NavLink 2.2</a></li>
                        <li><a href="#">NavLink 2.3</a></li>
                        <li><a href="#">NavLink 2.4</a></li>
                    </ol>
                </li>
                <li>
                    <a href="#">NavLink 3</a>
                    <ol class="dropdown">
                        <li><a href="#">NavLink 3.1</a></li>
                        <li><a href="#">NavLink 3.2</a></li>
                        <li><a href="#">NavLink 3.3</a></li>
                        <li><a href="#">NavLink 3.4</a></li>
                    </ol>
                </li>
            </ol>
        </nav>
    </body>
</html>

CSS

*{
                margin: 0;
                padding: 0;
                font-size: 1em;
                color: white;
                text-decoration: none;
                box-sizing: border-box;
            }
            html{ height: 100%; background-color: green;}

            body{
                min-height: 100%;
                display: grid;
                grid-template-columns: auto 100% auto;
                grid-template-rows: 100px 1em auto 12px;
                background-color: #003366;
            }

            #main_navigation{
                grid-column: 2/3;
                grid-row: 2/3;
                background-color: #333333;
                text-align: left;
            }
            #main_navigation ol{
                list-style-type: none;
            }

            #main_navigation>ol>li{
                display: inline-block;
                width: 100px;
                vertical-align: top;
                text-align: left;
            }

            .dropdown{
                display: none;
                text-align: left;
                width: 200px;
            }

            #main_navigation li:hover{
                background-color: #666666;
            }

            #main_navigation li:hover .dropdown{
                display: block;
                background-color: #333;
            }

            #main_navigation li>ol>li>a::before{
                content: '\1F4DD\a0';
            }
            #main_navigation>ol>li>a::before{
                content: '\1F4C1\a0';
                font-size:150%;
            }