JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="navigation">
                            <ul>
                            <li><a href="#">Individual Patient Analysis</a></li>
                            <li>
                            <a href="#">Multiple Patient Analysis<span></span></a>
                                <ul>
                                    <li><a href="#">Gender</a></li>
                                    <li><a href="#">Age</a></li>

                                    <li><a href="#">Field Number</a></li>
                                    <li><a href="#">Occupation</a></li>
                                    <li><a href="#">Eye<span></span></a>
                                <ul>
                                    <li><a href="#">Left</a></li>
                                    <li><a href="#">Right</a></li>
                                </ul>
                                </li>
                                </ul>
                            </li>


                            <li><a href="#">Upload File</a></li>

                        </ul>
                    </nav>

CSS

#navigation ul { 
    list-style: none; 
    list-style-position: outside; 
    font-size: 13px; 
    text-shadow: rgba(255,255,255,0.5) 0px 1px 1px; 
}
#navigation ul li { 
    float: left; 
    position: relative; 
    padding-right: 2px; 
    background: url(images/navigation-border.png) no-repeat right 0; 
}
#navigation ul > li.last { 
    background: transparent; 
    width: auto; 
    float: left; 
    padding-right: 0; 
}
#navigation ul > li.last a { 
    border-radius: 0px 5px 5px 0px; 
    -moz-border-radius: 0px 5px 5px 0px; 
    -webkit-border-radius: 0px 5px 5px 0px; 
    -o-border-radius: 0px 5px 5px 0px; 
    border-right: 1px solid #d7e1e8 !important; 
}
#navigation ul > li.first a { 
    border-radius: 5px 0px 0px 5px ; 
    -moz-border-radius: 5px 0px 0px 5px ; 
    -webkit-border-radius: 5px 0px 0px 5px ; 
    -o-border-radius: 5px 0px 0px 5px; 
    border-left: 1px solid #d7e1e8 !important; 
}
#navigation ul li a { 
    color: #324957; 
    float: left; 
    padding: 0 18px; 
    border: 1px solid #d7e1e8; 
    border-left: 0; 
    border-right: 0; 
    background: url(images/navigation.png) repeat 0 0;  
}
#navigation ul li a:hover,
#navigation ul li.active a { 
    background: url(images/navigation-a.png) repeat 0 0; 
    color: #3995d6; 
    text-decoration: none; 
}

#navigation ul li a span { 
    background: url(images/navigation-arr.png) no-repeat right 0; 
    width: 10px; 
    height: 6px; 
    float: right; 
    padding-left: 3px; 
    margin-top: 14px; 
}

#navigation ul li ul { 
    display: none; 
    float: none; 
    line-height: 28px;  
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    background: #e1efff; 
    border-radius: 0px 0px 5px 5px; 
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px; 
    -o-border-radius: 0px 0px 5px 5px; 
}
#navigation li:hover > ul { display:block; }

#navigation ul li ul li { 
    display: block; 
    float: none; 
    padding: 0; 
   ...