Having trouble getting a .php menu to drop down instead of sideways : Advanced help?!

The php code is

<?php 
if  ($activepage == 'unitdetails_change') {}
else echo "<script type=\"text/javascript\" src=\"javascript/jquery.min.js\"></script>";
?>
<script type="text/javascript">
$(document).ready(function() {
	
$("ul#topnav ol").hover(function() { //Hover over event on list item
	$(this).css({ 'background' : '#7FAECE'}); //Add background color + image on hovered list item
	$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
	$(this).css({ 'background' : 'none'}); //Ditch the background
	$(this).find("span").hide(); //Hide the subnav
});
	
});
</script>

PHP:

With this set-up the drop downs are being listed sideways



The code for the menus are set-up as follows.

 <ul>
        <li><a href="aboutus.php" style='font-size: 20px;'>     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    &nbsp;&nbsp;About Us</a>
		 <span>
                <a href="aboutus.php">About Us</a> |
				<a href="aboutus_staff.php">Staff Directory</a> |
                <a href="aboutus_centers.php">Service Centers</a> |
				<a href="aboutus_shop.php">Scout Shop</a> |
				<a href="documents/BrandIdentityGuide_000.pdf">Brand Identity</a>
				
            </span>		
		</li>

Code (markup):

 

Ended up using <br> tags and its all it took.