. Thank you very much for helping.
Btw.. this works perfectly in firefox, safari, and chrome. Also, ignore the #wrapper2, that is for a modal box.
Also, the font is different then in other browsers.
ul#menu {position: relative; margin: 0; padding: 0; text-decoration: none; float: left; list-style-type: none; }
ul#menu li { font-family: "league-gothic-reg", georgia;border-left: 1px solid #004a80;font-size: 29px; display: inline; display: block; float: left; text-decoration: none; padding: 0 .7em;}
ul#menu li a { color: #000; text-decoration: none; float: left; padding: 5px;}
ul#menu li:hover {background-color: #004a80;}
ul#menu li.current{ background-color: #fff;}
ul#menu li.current a { color: #004a80; }
ul#menu li.current:hover { color: #FFF; background-color: #004a80;}
ul#menu li:hover a {color: #FFF; }
nav ul ul {display: none;}
ul#menu ul li {font-family: verdana;font-size: 14px; width: 84%;}
nav ul li:hover ul {padding: 0; padding-top: 10px;display: block;position: absolute;background-color: #004a80; height: 130px;z-index: 1000; margin-top: 44px; margin-left: -119px; width: 394px}
ul#menu ul li:hover {background-color: #FFFFFF;}
ul#menu ul li a {padding: 3px;padding-top: 5px; padding-bottom: 5px;}
ul#menu ul li:hover a {color: #004a80;}
.rightmen {float: right; width: 50%;padding: 0;text-align: center;}
.leftmen {float: left; width: 50%;padding: 0;text-align: center;}
li.current2 { background: #0072bc;}
<nav>
<ul id="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="spa-services.html">Spa Services</a>
<ul>
<div class="leftmen">
<li><a href="professional-massages.html">> Massages</a></li>
<li><a href="permanent-cosmetics.html">> Cosmetics</a></li>
<li><a href="skin-needling.html">> Skin Needling</a></li>
<li><a href="esthetic-services.html">> Esthetic Services</a></li>
</div>
<div class="rightmen">
<li><a href="tanning.html">> Tanning</a></li>
<li><a href="nuskin-wrinkle-care.html">> Nuskin Wrinkle Care</a></li>
<li><a href="body-wraps.html">> Body Wraps</a></li>
<li><a href="weddings-parties.html">> Weddings & Parties</a></li>
</div>
</ul>
</li>
<div id="wrapper2">
<li><a class="modalbox" href="#inline" ><u>Book Online</u></a></li></ul>
<!-- hidden inline form -->
<div id="inline">
<h2>Make Your Appointment Here<br /> or Call: (903) 258-6915</h2>
<form id="contact" action="sendmessage.php" method="post" name="contact">
<label>Services</label>
<select name="services" id="select">
<option value="op1" value="needling">Skin Needling</option>
<option value="op2">Permanent Cosmetics</option>
<option value="op3">Tattoo Removal</option>
<option value="op4">Nuskin* Wrinkle Removal</option>
<option value="op5">Cellulite Removal</option>
<option value="op6">Massage</option>
<option value="op7">Waxing</option>
<option value="op8">Facials</option>
<option value="op9">Airbrush tanning or makeup</option>
<option value="op10">Body Wrap</option></select>
<br /><br />
<label for="name">Name</label>
<input id="name" class="txt" type="name" name="name" /><br />
<label for="tel">Phone</label>
<input id="tel" class="txt" type="tel" name="tel" /><br />
<button id="send">Make Your Appointment</button></form></div>
</div>
</nav>