JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<nav id="main-navigation" class="navigation cf">
    <ul>
        <li><a href="#">Homepage</a>

        </li>
        <li> <a href="#">About Us</a>

            <ul>
                <li><a href="#">The Company</a>

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

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

                </li>
                <li><a href="#">Meet The Team</a>

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

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

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

                    <ul>
                        <li><a href="#">Hosted IP PBX</a>

                        </li>
                        <li><a href="#">Telephone Numbers</a>

                        </li>
                        <li><a href="#">Traditional Lines</a>

                        </li>
                        <li><a href="#">Telephone Systems</a>

                        </li>
                    </ul>
                </li>
                <li><a href="#">I.T. Support</a>

                </li>
                <li><a href="#">Offsite Backup</a>

                </li>
                <li><a href="#">Web Hosting</a>

                </li>
                <li><a href="#">Hosted Exchange</a>

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

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

                    <ul>
                        <li><a href="#">CCTV Systems</a>

                        </li>
                        <li><a href="#">Access Control</a>

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

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

            <ul>
     ...

CSS

/*your code simplified */

/*1st menu*/
 .navigation ul {
    float: right;
    position: relative;
    z-index: 1200;
    margin-right: 15px;
}
.navigation ul li {
    display:inline-block;
    position: relative;
}
.navigation ul li a {
    font-size: 13px;
    font-weight: 700;
    color: #4d4d4d;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0;
    text-transform: uppercase;
    border-bottom: 2px solid #fff;
    transition: background-color .2s linear, padding-top .2s linear;
    padding: 80px 9px 10px;
}
.navigation ul li a:hover {
    background-color: #F36F25;
    /*#373737;*/
    text-shadow: none;
    color: #f7f7f7!important;
    box-shadow: 0 3px 0 #ff8833;
}
.navigation ul li a span {
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-size: 9px;
    display: block;
    line-height: 14px;
    color: #9f9f9f;
}
/*2nd menu */
 .navigation ul ul {
    margin-top: 60px;
    position: absolute;
    top: -999em;
    width: 180px;
    background: #fff;
    border-top: 3px solid #ff8833;
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
}
.navigation ul ul li {
    width: 100%;
    margin-left: 0;
    padding: 0;
}
.navigation ul ul li a:hover {
    background-color: #F36F25;
    /*#373737;*/
    box-shadow: none;
}
.navigation ul ul li a {
    color: #707070;
    font-size: 11px;
    margin-left: 0;
    border: none;
    width: 150px;
    transition: none;
    padding: 8px 15px;
}
.navigation ul li:hover ul {
    left: 0;
    top: 2.5em;
    z-index: 99;
}
/*3rd menu */
 .navigation ul li:hover li ul {
    top: -999em;
    margin-top: 0;
}
.navigation ul li li:hover ul {
    left: 180px;
    top: 0;
}
.navigation ul li li:hover li ul {
    top: -999em;
}
.navigation ul ul li a {
    position:relative;
}
.navigation ul ul li a i {
    position: absolute;
    right: 15px;
    line-height: 23px;
    font-size: 14px;
}
/* my code */
 .navigation ul li:hover a {
    background: #F36F25;
    font-weight:...