JSFiddle - React, Tailwind, and code Playground

by krishnathota

HTML

<div id="container" >
                    <ul id="menu">
                        <li><a href="aboutus.php">AboutUs</a>
                            <ul class="sub">
                                <li><a href="aboutsquare.php">About Square Innovations</a></li>
                                <li><a href="ourvision.php">Our Vision</a></li>
                                <li><a href="ourmission.php">Our Mission</a></li>
                                <li><a href="trainerprofiles.php">Trainer Profiles</a></li>
                                <li><a href="funclass.php">Fun In Our ClassRooms</a></li>
                            </ul>
                        </li>
                        
                        <li><a href="itcourses.php">ITCourses</a>
                            <ul class="sub">
                                <li><a href="programmingcrs.php">Programming Courses</a></li>
                                <li><a href="multimedia.html">Multimedia Courses</a></li>
                                <li><a href="microsoftcrs.php">Microsoft Programs </a></li>
                                <li><a href="unixlinuxcrs.php">Unix/Linux Courses</a></li>
                                <li><a href="database.php">Database Programming</a></li>
                                <li><a href="computertrouble.php">Computer Troubleshooting & Assembling</a></li>
                                <li><a href="datacenterinfrastructer.php">DataCenter & Infrastructer</a></li>
                                <li><a href="citrix.php">Citrix</a></li>
                                <li><a href="fasttrackcrs.php">FastTrack Courses</a></li>
                                <li><a href="kids.php">Courses For Students</a></li>
                                <li><a href="studentrewards.html">Student Rewards</a></li>
                            </ul>
                        </li>
                        <li><a href="certification.html">Certifications</a>
                            <ul...

CSS

ul {
            font-family: Arial, Verdana;
            font-size: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }

            ul li {
                display: block;
                position: relative;
                float: left;
                text-align: center;
            }

        li ul {
            display: none;
        }

        ul li a {
            display: block;
            text-decoration: none;
            color: #ffffff;
            border-top: 1px solid #ffffff;
            padding: 5px 15px 5px 15px;
            background: #1e7c9a;
            margin-left: 1px;
            white-space: nowrap;
        }

            ul li a:hover {
                background: #3b3b3b;
            }

        li:hover ul {
            display: block;
            position: absolute;
        }

        li:hover li {
            float: none;
            font-size: 11px;
        }

        li:hover a {
            background: #3b3b3b;
        }

        li:hover li a:hover {
            background: #1e7c9a;
        }

        .sub {
            width: auto;
        }

            .sub li {
                width: 100%;
                text-align: left;
            }