JSFiddle - React, Tailwind, and code Playground

by trickeedickee

HTML

<div id="menucontainer">
        <div id="menu">
            <ul>
                <li id="regularline"><a href=""><b>Home</b></a></li>

                <li id="regularline">
                    <a href="#"><b>HTML</b></a>

                    <ul>
                        <li id="regularline"><a href="#"><b>Introduction</b></a></li>

                        <li id="doubleline"><a href="#"><font size="2"><b>Making an HTML File</b></font></a></li>

                        <li id="regularline"><a href="#"><b>Hello World</b></a></li>

                        <li id="regularline"><a href="#"><b>Body</b></a></li>

                        <li id="regularline"><a href="#"><b>Font</b></a></li>

                        <li id="regularline"><a href="#"><b>DIV</b></a></li>

                        <li id="regularline"><a href="#"><b>Tables</b></a></li>

                        <li id="regularline"><a href="#"><b>Links</b></a></li>

                        <li id="regularline"><a href="#">Images</a></li>

                        <li id="doubleline"><a href="#"><font size="2"><b>Bold, Ittalics, and Underline</b></font></a></li>

                        <li id="regularline"><a href="#"><b>Positioning</b></a></li>

                        <li id="regularline"><a href="#"><b>Tips and Extras</b></a></li>
                    </ul>
                </li>

                <li id="regularline">
                    <a href="#"><b>PHP</b></a>

                    <ul>
                        <li id="regularline"><a href="#"><b>Introduction</b></a></li>

                        <li id="regularline"><a href="#"><font size="2"><b>Making a PHP file</b></font></a></li>

                        <li id="regularline"><a href="#"><b>Hello World</b></a></li>

                        <li id="regularline"><a href="#"><b>Echoing</b></a></li>

                        <li id="regularline"><a href="#"><b>Variables</b></a></li>

                        <li id="regularline"><a href="#"><b>If...

CSS

.list {
    position: relative;
    width: 200px;
    margin-left: 110px;
    margin-right: auto;
    }

#menucontainer {
    position: relative;
    z-index: 2;
    background: #ffffff;
    width: 1001px;
    }

#menu {
    position: relative;
    color: #999999;
    margin: 0px auto;
    }

    #menu ul {
        list-style-type: none
        }

        #menu ul li {
            z-index: 2;
            float: left;
            position: relative;
            }

            #menu ul li a {
                background-color: #ffffff;
                width: 91px;
                height: 40px;
                display: block;
                text-align: center;
                color: #999999;
                text-decoration: none;
                }

            #menu ul li a:hover {
                background: #12aeef;
                color: #ffffff;
                }

            #menu ul li ul {
                display: none
                }

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

            #menu ul li:hover ul li {
                width: 100px;
                height: 40px;
                overflow: hidden;
                }

#doubleline {
    line-height: 20px
    }

#regularline {
    line-height: 40px
    }

#menu ul li:hover ul li a {
    width: 200px;
    height: 40px;
    }

#menu ul li:hover ul li {
    width: 200px;
    height: 40px;
    overflow: hidden;
    }