Почему мой JS не работает?

Question

Так что у меня этот кусок HTML, который непосредственно представляет меню:

<div id="menu"> 
       <ul class="pnav"> 
        <li><a href="#">Home</a></li> 
        <li> 
         <a href="#">About GM</a> 
         <ul class="cnav"> 
          <li><a href="#">Team</a></li> 
          <li><a href="#">Events</a></li> 
          <li><a href="#">Testimonials</a></li> 
          <li><a href="#">Contact</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Tournaments</a></li> 
        <li><a href="#">Membership</a></li> 
       </ul> 
      </div> 

У меня тоже есть этот кусок CSS для этого меню:

ul.pnav { 
    list-style: none; 
    padding: 0 20px;  
    margin: 0; 
    width: 920px; 
    background: #222; 
    font-size: 1.2em; 
    background: url(topnav_bg.gif) repeat-x; 
} 
ul.pnav li { 
    display:inline; 
    margin: 0; 
    padding: 0 15px 0 0; 
    position: relative; 
} 
ul.pnav li a{ 
    padding: 10px 5px; 
    color: #fff; 
    text-decoration: none; 
} 
ul.pnav li a:hover{ 
    background: url(topnav_hover.gif) no-repeat center top; 
} 

ul.pnav li ul.cnav { 
    list-style: none; 
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ 
    left: 0; top: 35px; 
    background: #333; 
    margin: 0; padding: 0; 
    display: none; 
    width: 170px; 
    border: 1px solid #111; 
} 
ul.pnav li ul.cnav li{ 
    display:block; 
    margin: 0; padding: 0; 
    border-top: 1px solid #252525; 
    border-bottom: 1px solid #444; 
    clear: both; 
    width: 170px; 
} 

И я это JS:

$(document).ready(function(){ 

    //$("ul.cnav").parent().append("<span></span>"); 

    $("ul.pnav li").click(function() { 

     $(this).parent().find("ul.cnav").slideDown('fast').show(); 

     $(this).parent().hover(function() { 
     }, function(){ 
      $(this).parent().find("ul.cnav").slideUp('slow'); 
     }); 

    }); 

}); 

, который я сам не совсем написал, только его настроил и который называется так в HTML-теге HEAD:

<script src="js/dropdown.js"></script> 

но выпадающий не работает, может any1 мне помочь и объяснить какое-то решение для меня: D

Answer 1

Я подозреваю, что вы просто забыли загрузить JQuery.

Кроме того, я сделал небольшое изменение в вашем скрипте, чтобы меню только открыло дочерний субнав.

Это:

$("ul.pnav li").click(function() { 

Стала:

$("ul.pnav li a").click(function() { 

Как чувствовал себя лучше с линией под ним.

Живой пример: http://jsfiddle.net/DnGRm/

Answer 2

Добавить:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script> 

перед выше - Tag в случае, если вы пропустили? включить jQuery.

Answer 3

перед включением каких-либо JS файл, который вы должны включать файл «jquery.js», который вы можете скачать форму здесь http://jquery.com/download/