JSFiddle - React, Tailwind, and code Playground

HTML

<div id="templatemo_menu">
        <ul>
              <li><a href="/">Home</a></li>
              <li><a href="#">About Us</a>
                <ul>
                    <li><a href="/quiz/" >Quiz</a></li>
                    <li><a href="/photos/">Photos</a></li>
                    <li><a href="/story/" class="last">Our Story</a></li>
                </ul>
              </li>
              <li><a href="#" class='header_link' >Wedding Day</a>
                <ul>
                    <li><a href="/location/">Ceremony/Reception</a></li>
                    <li><a href="/wedding_party/">Our Wedding Party</a></li>
                    <li><a href="#" class="last">After Party</a></li>
                </ul>
              </li>
              <li><a href="#" class='header_link'>Guest Info</a>
                <ul>
                    <li><a href="/map/">Map</a></li>
                    <li><a href="#" class="last">Lodging</a></li>
                </ul>
              </li>
              <li><a href="/guestbook/">Guestbook</a></li>
              <li><a href="mailto:paulandjason27@gmail.com" target="_blank" >Contact Us</a></li>
              <li><a href="https://github.com/pnichols104/wedding-website#wedding-website" target="_blank" class="last">About This Site</a></li>
        </ul>   
        
        <div class="cleaner"></div>
        
    </div>

CSS

body {
	margin: 0px;
	padding: 0px;
	color: #252525;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	line-height: 1.7em; 
	background: url(/static/images/leaves_background2.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#templatemo_menu {
	width: 990px;
	height: 65px;
	padding: 25px 50px 0;
	font-size: 16px;
	background: url(/static/images/templatemo_menu.png) no-repeat;
}

#templatemo_menu ul {
	z-index: 1001;
/*	float: left;
*/	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	display: inline;
}

#templatemo_menu ul li {
	padding: 0px;
	margin: 0px;
	display: inline;
	float: left;
}

#templatemo_menu ul li a {
	float: none;
	display: block;
	height: 27px;
	padding: 0 25px;
	margin: 0;
	font-size: 16px;
	text-align: left;
	text-decoration: none;
	color: #383838;	
	font-weight: normal;
	outline: none;
	border: none;
/*	background: url(/static/images/templatemo_menu_divider.png) center right no-repeat;
*/}

#templatemo_menu ul li a:hover, 
#templatemo_menu ul li .current { color: #00bb06 }

#templatemo_menu ul li .last { 
	background: none 
}

#templatemo_menu ul li:hover > ul {
	display: block; 
	float: left; 
	clear: left;
}


#templatemo_menu ul:after {
		content: ""; 
		clear: both; 
		display: block;
	}


	
#templatemo_menu ul ul {
	display: none;
	border-radius: 0px; 
	padding: 0;
	position: absolute; 
	top: 100%;
	background: #f8f8f8;

}
#templatemo_menu ul ul li {
	float: none; 
	border-top: 1px solid #6b727c;
	border-bottom: 1px solid #575f6a;
	position: relative;
}

#templatemo_menu ul ul li a:hover {
}

#templatemo_menu ul ul:last-child {
/*    border:1px solid red;
*/    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-bottomleft: 15px;
    -moz-border-radius-bottomright: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius:...

JavaScript

$(function(){

    $("ul.dropdown li").hover(function(){
    
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    
    }, function(){
    
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    
    });
    
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});