JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation_bar">
<ul>                        
<li id=""><a href="">Home</font></a></li>                        
    <li id='inFront'><a href="Beauty_treatments.html">Beauty Treatments</a></li>
<ul>
<li><a href="">Manicure & Pedicure</a></li>
<li><a href="">Gel Manicure & Pedicure</a></li>
<li><a href="">Waxing</a></li>
<li><a href="">Facials</a></li>
<li><a href="">Make-up</a></li>
<li><a href="">Eye Treatments</a></li>
</ul> 
</div>

CSS

#navigation_bar{	background-image:url(Images/navigation_background2.gif);
					position:relative;
					height:35px;
					width:1070px;
					top:30px;
					left:0px;
					}
					
#navigation_bar ul{	list-style-type:none;
					margin:opx;
					padding:0px;
					}
					
#navigation_bar ul li{	float:left;
						}
						
#navigation_bar ul li a{	display:block;
							padding: 0 20px 0 20px;
							margin:0;
							font-family:Arial, Helvetica, sans-serif;
							font-size:14px;
							color:#222;
							font-weight:bold;
							text-decoration:none;
							line-height:36px;
							border:none;										
							}
							
							
#navigation_bar ul li a:hover{	border:none;
								color:#FFFFFF;
								background-image:url(Images/mouse_over_background.gif);
								z-index:1;											
								}
								
#navigation_bar ul li ul li{	float:none;
								z-index:2;
								}

#navigation_bar ul li ul{	position:absolute;
							display:none;	
							}
							
#navigation_bar ul li:hover ul{	display:block;	
											}
											
#navigation_bar ul li ul li a:active{	display:block;
									}