JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
            <a href="index.html" atl="Logo">
                <img src="img/ec_logo.png" alt="E C the photographer logo" class="logo">
            </a>
            <div class="navbar">
            <ul>
                <li><a href="index.html">Home</a></li>
                <!-- Photography Drop Down Menu -->
                <li><a href="photos.html">Photography</a>
                    <ul class="pic-dropdown">
                        <li><a href="models.html">Modeling</a></li>
                        <li><a href="portraits.html">Portraits</a></li>
                        <li><a href="fashion.html">Fashion</a></li>
                        <li><a href="events.html">Events</a></li>
                        <li><a href="weddings.html">Weddings</a></li>
                    </ul>
                </li>
                <!-- Blog Drop Down Menu -->
                <li><a href="blog.html">Blog</a>
                    <ul class="blog-dropdown">
                        <li><a href="35.html">35mm</a></li>
                    </ul>
                </li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

CSS

/*---------------------------------------------------------------------General-----------------------------------------------------------------------------*/

body {
    font-family: 'Open Sans', sans-serif;
}
div.navbar li {
    list-style:none;
    background-image:none;
    background-repeat:none;
    background-position:0; 
}
ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
.navbar ul li {
    color: #000;
    display: inline-block;
    /* Need position: relative to make your sub-nav behave */
    position: relative;
}

/* This rule is necessary to hide the dropdown */
.navbar ul li ul {
    display: block;
    position: absolute;
    /* Moves it off the page, to the far left, so not visible */
    left: -999em;
    top: 20px; /* adjust as appropriate */
    width: 250px; /* adjust as appropriate */
}

/* This is how you make it show up when the li is hovered */
.navbar ul li:hover ul {
    left: auto;
    display: block
}
.navbar ul li:hover ul li {
    display: block;
}