JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<nav>
    <ul>
        <li><a href="#">Om rbs</a>

        </li>
        <li><a href="#">Gratis</a>

        </li>
        <li><a href="#">Kurser</a>

            <ul>
                <li><a href="#">Foredrag</a>

                </li>
                <li><a href="#">Workshops</a>

                </li>
                <li><a href="#">Proces med konsulent</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Bliv Certifikeret</a>

        </li>
        <li><a href="#">Workshops</a>

        </li>
        <li><a href="#">Shop</a>

        </li>
        <li><a href="#">Kontakt</a>

        </li>
        <li><a href="#">Login</a>

        </li>
    </ul>
</nav>

CSS

nav {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #2d2d2d;
}
nav::after {
    display: block;
    clear: both;
    content:'';
}
nav a {
    font-size: 16px;
    font-family:'Open Sans Condensed', 'Open Sans', Helvetica, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
}
nav > ul {
    position: relative;
    float: right;
    list-style: none;
    padding: 0;
    margin: 0;
}
nav > ul > li {
    position: relative;
    float: left;
    border-right: solid 1px rgba(255, 255, 255, 0.4);
    padding: 10px 0;
}
nav > ul > li::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -6px;
    display: none;
    content:'';
    width: 12px;
    height: 12px;
    background-color: #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
nav > ul > li > a:hover {
    color: #fff;
    background-color: #3e3e3e;
}
nav > ul > li > a {
    padding: 10px 20px;
}
nav > ul > li:hover > ul {
    display: block;
}
nav > ul > li:hover::after {
    display: block;
}
nav > ul > li > ul {
    position: absolute;
    padding: 0;
    top: 100%;
    left: 0;
    list-style: none;
    display: none;
}
nav > ul > li > ul > li {
    float: left;
    padding: 10px 0;
}
nav > ul > li > ul > li > a {
    color: #7c7c7c;
    white-space: nowrap;
    padding: 10px 20px;
}
nav > ul > li > ul > li > a:hover {
    color: #000;
    background-color: #fff;
}
nav > ul > li > ul {
    float:left;
    text-aling:left;
    background:red;
    padding:0px;
}