Hello Guys, I have a strange problem. I do not code in JavaScript just copy lines from here and there.
I am using a JavaScript for my Drop Down Menu but when I copy and paste the link (http://obsidiangaming.net/problem) into the browser and load the page, the JavaScript seems to have not loaded as the there isn't any drop down on the menus, even if you refresh the page nothing will happen. For this to work I have to go to the URL bar and click on the web address and press Enter. Could you guys please give me some guidance in what Im doing wrong?

The page is: http://obsidiangaming.net/problem

HTML Code:
<html><head>
	<title>Test</title>
	<link rel="stylesheet" href="assets/css/general.css" type="text/css">
	<script src="ddmenu/ddmenu.js" type="text/javascript"></script><nav></nav>
    <link href="ddmenu/ddmenu.css" rel="stylesheet" type="text/css">
	<script>setTimeout(function() {$('#page-hide').hide();}, 100);</script>
	<style>#page-hide {z-index: 100;}</style>
	<script>function test() {document.body.innerHTML = document.body.innerHTML.replace('Menu Purchase Reminder', '');}</script>
</head>
<body onload="test()">
	<!--<div id="page-hide"></div>-->
	<div id="page-wrapper">
	
	<div id="left"><div id="ddmenu-ribbon-start"></div></div>
	<div id="page">
	<div id="logo"></div>
	<div id="menuwrapper">
	Menu Purchase Reminder<nav id="ddmenu">
    <ul>
        <li class=""><a href="#">About Us</a></li>
        <li class=""><a href="#" class="arrow">Cleaning</a>
           <div class="drop" style="display: none; width: 163px; top: 47px; overflow: hidden; padding-top: 0px; padding-bottom: 0px; height: 0px;"><div style="display: block; position: absolute; float: left; top: auto; bottom: 0px; padding-top: 20px; padding-bottom: 20px;">
               <div class="column" style="display: block;">
                    <b>Cleaning</b>
                    <a href="#">Domestic Cleaning</a>
                    <a href="#">Office Cleaning</a>
                    <a href="#">Carpet Cleaning</a>
                    <a href="#">End of Tenancy Cleaning</a>
                    <a href="#">Communal Area Cleaning</a>
                </div>
            </div></div>
        </li>
        <li><a href="#">Ironing</a></li>
        <li><a href="#" class="arrow">Tasks</a>
           <div class="drop" style="display: none; width: 154px; top: 47px; overflow: hidden; padding-top: 0px; padding-bottom: 0px; height: 0px;"><div style="display: block; position: absolute; float: left; top: auto; bottom: 0px; padding-top: 20px; padding-bottom: 20px;">
               <div class="column" style="display: block;">
                    <b>Tasks</b>
                    <a href="#">Regular Cleaning Tasks</a>
                    <a href="#">One-Off Cleaning Tasks</a>
                </div>
            </div></div>
        </li>
        <li><a href="#" class="arrow">Prices</a>
           <div class="drop" style="display: none; width: 153px; top: 47px; overflow: hidden; padding-top: 0px; padding-bottom: 0px; height: 0px;"><div style="display: block; position: absolute; float: left; top: auto; bottom: 0px; padding-top: 20px; padding-bottom: 20px;">
               <div class="column" style="display: block;">
                    <b>Prices</b>
                    <a href="#">Carpet Cleaning Prices</a>
                    <a href="#">One-Off Cleaning Prices</a>
                    <a href="#">Ironing Prices</a>
                </div>
            </div></div>
        </li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>
</div>
	
	<div id="ribbon-container"><div id="ribbon-start"></div><div id="ribbon"><!-- Text Here --><h1>page title goes here</h1></div></div><br><br><br><br><br></div>
	<div id="right"><div id="ddmenu-ribbon-end"></div><div id="ribbon-end"></div></div>
	
	</div>
</body></html>
(I know the HTML is very messy but this is a draft)

Thank you,
Oskar