load dynamically jquery
<p>I'm using the following script to load jquery in the head in case if is not already loaded.</p>

<pre><code>&lt;script type="text/javascript"&gt;
if(!window.jQuery)
{
   var script = document.createElement('script');
   script.type = "text/javascript";
   script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
   document.getElementsByTagName('head')[0].appendChild(script);
}
&lt;/script&gt;
&lt;script type="text/javascript"&gt;


$(document).ready(function() {
        $("#nav li:has(ul)").hover(function(){
            $(this).find("ul").slideDown();
        }, function(){
            $(this).find("ul").hide();
        });
    });
&lt;/script&gt;

&lt;style&gt;
#nav {position: fixed; white-space:nowrap;}
#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;list-style: none;}
#nav li a { width:220px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:90%; border:1px solid #ccc;text-transform: uppercase;font-weight: bold; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0;width: 178px; }
* html li li { display:inline; } /* IE6 Bugfix... */
&lt;/style&gt;
</code></pre>

<p>but it doesn't appear in the head. </p>
