JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="nav">
                <li><a href="index.php">Home</a></li>
                <li class="dropdown_alignedLeft">
                    <a href="">Products</a>
                    <ul><li class="dropdown_alignedRight">
                        <a href="">iPoP</a>
                        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=ipop">iPoP - Network Solutions for Vessels</a></li></ul><li class="dropdown_alignedRight">
                        <a href="">Cameras</a>
                        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=icam">iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</a></li></ul><li class="dropdown_alignedRight">
                        <a href="">BNWAS</a>
                        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=bnwas">BNWAS - Bridge Navigation Watch Alarm System</a></li></ul><li class="dropdown_alignedRight">
                        <a href="">Lighting</a>
                        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=peli">Peli 2690 - Intrinsically Safe LED Head Lamp</a></li></ul><li class="dropdown_alignedRight">
                        <a href="">Communication</a>
                        <ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li><a href="customers.php?category=handy">Ex-Handy 06 - Intrinsically Safe Cell Phone</a></li></ul>
                    </ul>
                    <li...

CSS

#nav {
    float: right;
    margin: 15px 0 0 0;
}

    #nav li {
        float: left;
    }

        #nav li a {
            display: block;
            padding: 10px 20px 20px 20px;
            font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
            font-size: 16px;
            text-decoration: none;
        }

    .dropdown_alignedLeft, .dropdown_alignedRight {
        position: relative;
    }

        #nav .dropdown_alignedLeft > a, #nav .dropdown_alignedRight > a {
            padding: 10px 30px 20px 20px;            
        }

            #nav .dropdown_alignedLeft:hover > a, #nav .dropdown_alignedRight:hover > a {
                -moz-border-radius-topleft: 5px;
                -moz-border-radius-topright: 5px;
                -moz-border-radius-bottomright: 0;
                -moz-border-radius-bottomleft: 0;
                -webkit-border-top-left-radius: 5px;
                -webkit-border-top-right-radius: 5px;
                -webkit-border-bottom-right-radius: 0;
                -webkit-border-bottom-left-radius: 0;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
                color: #FFFFFF;
            }

        .dropdown_alignedLeft ul, .dropdown_alignedRight ul {
            display: none;
        }

        #nav .dropdown_alignedLeft:hover > ul, #nav .dropdown_alignedRight:hover > ul {
            display: block;
            z-index: 100;
            position: absolute;
            top: 50px;
            padding: 0 0 6px 0;                    
            -moz-border-radius-topleft: 0;
            -moz-border-radius-topright:0;
            -moz-border-radius-bottomright: 5px;
            -moz-border-radius-bottomleft: 5px;
            -webkit-border-top-left-radius: 0;
            -webkit-border-top-right-radius: 0;
            -webkit-border-bottom-right-radius: 5px;
           ...