JSFiddle - React, Tailwind, and code Playground

by Yuli Satriani

HTML

<nav class="nav-bar">
    <label for="toggle" class="nav-bar__label"><b>Menu Keren Komputerdia</b></label>
    <input type="checkbox" id="toggle" class="nav-bar__toggle"/>
    <ul class="nav-bar__list">
        <li class="menu_navigation">
            <a href="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" class="nav-bar__link">Menu Item 1</a>
        </li>
        <li class="menu_navigation">
            <a href="#" class="nav-bar__link">Menu Item 2</a>
        </li>
        <li class="menu_navigation">
            <a href="#" class="nav-bar__link">Menu Item 3</a>
        </li>
        <li class="menu_navigation">
            <label for="toggle-sub-1" class="nav-bar__sub-label">Sub Menu</label>
            <input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle"/>
            <ul class="nav-bar__list">
                <li class="menu_navigation">
                    <a href="#" class="nav-bar__link">Sub Menu 1</a>
                </li>
                <li class="menu_navigation">
                    <a href="#" class="nav-bar__link">Sub Menu 2</a>
                </li>
                <li class="menu_navigation">
                    <a href="#" class="nav-bar__link">Sub Menu 3</a>
                </li>
            </ul>
        </li>
        <li class="menu_navigation">
            <a href="#" class="nav-bar__link">Menu Item 4</a>
        </li>
    </ul>
</nav>
<br><br><br><br><br><br><br><br><br><br>
<p><a href="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" target='_blank'>Kembali Ke Tutorial</a></p>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}
.nav-bar {
    background: #000;
    width: 100%;
}

.nav-bar__label {
    color: #fff;
    display: block;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
    width: inherit;
}

.nav-bar__label::after,
.nav-bar__sub-label::after {
    content: " +";
}

.nav-bar__label,
.nav-bar__sub-label {
    cursor: pointer;
}

.nav-bar__list {
    background: #000;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav-bar__list,
[id^="toggle"] {
    display: none;
}

[id^="toggle"]:checked + .nav-bar__list {
    display: block;
}

.menu_navigation {
    display: block;
}

.nav-bar__link,
.nav-bar__sub-label {
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    word-wrap: break-word;
}

.menu_navigation .menu_navigation .nav-bar__link,
.menu_navigation .menu_navigation .nav-bar__sub-label {
    padding: 10px 10px 10px 30px;
}

.nav-bar__link:hover,
.nav-bar__link:active,
.nav-bar__sub-label:hover {
    background: #666;
}

@media all and (min-width : 992px) {
    .nav-bar > .nav-bar__label {
        display: none;
    }

    .nav-bar > .nav-bar__list {
        display: block;
    }

    .nav-bar > .nav-bar__list > .menu_navigation {
        display: inline-block;
        position: relative;
    }

    .menu_navigation .nav-bar__list {
        position: absolute;
    }

    .menu_navigation .menu_navigation .nav-bar__link,
    .menu_navigation .menu_navigation .nav-bar__sub-label {
        padding: 10px 20px;
    }
}
p{
  width:100%;
  display:block;
  text-align:center;
  font-size:200%
}