JSFiddle - React, Tailwind, and code Playground

by thfc

HTML

<div class="nav">
    <ul class="menu">
        <li class="subnav"><a href="#">Some page</a>
        </li>
        <li class="subnav"><a href="#">Some page</a>

            <ul id="sub_menu_1">
                <li class="item_1">
                    <ul>
                        <li><a href="#">Some page</a>

                            <li><a href="#">Some page</a>

                                <li><a href="#">Some page</a>

                    </ul>
                    </li>
                    <li class="item_2">
                        <ul>
                            <li><a href="#">Some page</a>

                                <li><a href="#">Some page</a>

                                    <li><a href="#">Some page</a>

                        </ul>
                        </li>
                        <li class="item_3">
                            <ul>
                                <li><a href="#">Some page</a>

                                    <li><a href="#">Some page</a>

                                        <li><a href="#">Some page</a>

                            </ul>
                            </li>
            </ul>
            </li>
            <li class="subnav"><a href="#">Some page</a>

                <ul id="sub_menu_2">
                    <li class="item_1">
                        <ul>
                            <li><a href="#">Some page</a>

                                <li><a href="#">Some page</a>

                                    <li><a href="#">Some page</a>

                        </ul>
                        </li>
                        <li class="item_2">
                            <ul>
                                <li><a href="#">Some page</a>

                                    <li><a href="#">Some page</a>

                                        <li><a href="#">Some page</a>

                            </ul>
                            </li>
                            <li class="item_3">
      ...

CSS

html {
    background:#d2d2d2;
}
ul.menu {
    list-style-type:none;
        padding-left: 0;
        position: relative;
        float: left;
}
li.subnav {
    display:inline;
    float:left;
    /* margin:0 0 0 3px; */
    background:#667788;
    padding:3px;
    width:125px;
    text-align:center;
    font-family:Arial, sans-serif;
}
ul.menu li.subnav:hover {
    background:#708090;
}
ul.menu li.subnav a {
    width:100%;
    text-decoration:none;
    font-size:14px;
    color:#ddd;
}
ul.menu li.subnav a:hover {
    color:#fff;
    text-decoration:underline;
}
li.subnav ul#sub_menu_1, li.subnav ul#sub_menu_2 {
    display:none;
        list-style: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
}
li.subnav:hover ul#sub_menu_2, li.subnav:hover ul#sub_menu_1 {
    
    display:block;
    background:#708090;
}
ul#sub_menu_1, ul#sub_menu_2 {
    list-style-type:none;
    background:#708090;
    height:auto;
    padding:5px;
    border:none;
}

li.item_1 {
    float:left;
    margin:5px 0 5px -10px;
    width:225px;
    height:auto;
    border-right:1px solid #aaa;
}
li.item_2 {
    float:left;
    margin:5px 0 5px -10px;
    width:225px;
    height:auto;
    border-right:1px solid #aaa;
}
li.item_3 {
    float:left;
    margin:5px 0 5px -15px;
    width:225px;
    height:auto;
    border:none;
}
li.item_1 ul, li.item_2 ul, li.item_3 ul {
    list-style-type:none;
    text-align:left;
}