jquery dropdown menu cant figure it out : <p>I cant figure out what is wrong in my code im trying to make a jquery dropdown menu. I have enclosed my html, css and javascript. please take a look and help me out, thank you.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
$("li").hover(function(){
    $("this").find('ul &gt; li').fadeToggle(500);
});
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul{
    margin: 0;
    padding:0;
    list-style: none;
}
ul li{
    float: left;
    width: 250px;
    height: 30px;
    line-height: 30px;
    background-color: #099;
    text-align: center;
}

ul li li {      
    background-color: #099;
    color: #000;
    display: none;
}
ul li a {
    text-decoration:none;
    color: #000;  
}

ul li li:hover{
    background:#03F;
      
}
ul li li a {
    text decoration: none;
    color: #000;  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;

&lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
&lt;meta charset="utf-8"&gt;

&lt;title&gt;untitled&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="page"&gt;
&lt;header&gt;
    &lt;a class="logo" href="#"&gt;&lt;/a&gt;
     &lt;nav class="nav_menu"&gt;
            &lt;ul class="dropmenu"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 1-1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#" class="selected"&gt;Sub Link 1-2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 1-3&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 2-1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 2-2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 2-3&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 4-1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 4-2&lt;/a&gt;
                                &lt;ul&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Sub Link 4-2-1&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Sub Link 4-2-2&lt;/a&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;a href="#"&gt;Sub Link 4-2-3&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                                &lt;/li&gt;
                  
                            &lt;li&gt;&lt;a href="#"&gt;Sub Link 4-3&lt;/a&gt;&lt;/li&gt;
                   
                          
                        &lt;/ul&gt;
         
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
&lt;/header&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="js/plugin/jquery-1.12.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/application.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>

I cant figure out what is wrong in my code im trying to make a jquery dropdown menu. I have enclosed my html, css and javascript. please take a look and help me out, thank you.</p>
