Как сделать мою регистрационную форму отображаемой на мыши над использованием jquery hover?

Question

Я делаю веб-страницу с выпадающим логином.
Вход в систему должен сдвигаться вниз, когда мышь наводится над элементом списка в меню навигации с помощью jquery hover.

Форма входа скрыта в css с отображением: none до тех пор, пока ссылка для входа не будет обработана.
Я пробовал это, используя как slideToogle, так и css ({"display": "block"})
Я не могу заставить его работать, думая о нем. Любая помощь будет оказана с благодарностью.

Вот exercept с моей страницы:

$("#login").hover(function() { 
 
\t $("#login-form").slideToogle(); 
 
});

#login { 
 
    list-style: none; 
 
\t height: 40px; 
 
} 
 

 
#login a { 
 
    text-decoration: none; 
 
    color: white; 
 
    background-color: #666; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    padding: 10px 20px; 
 
} 
 

 
#login-form { 
 
    position: absolute; 
 
    margin-top: 9px; 
 
    display: none; 
 
    float: left; 
 
    clear: both; 
 
    background-color: #666; 
 
    padding: 0 2% 2% 2%; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
} 
 

 
#login-form .text { 
 
    width: 100%; 
 
    float: right; 
 
    margin-bottom: 2%; 
 
} 
 

 
#login-form .submit { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul class="ext-nav"> 
 
     <li id="login"> 
 
      <a href="#" margin-right="40px">login</a> 
 
       <form id="login-form" action="script/login.php" method="post"> 
 
        <p><input class="text" type="text" name="username" placeholder="username" /></p> 
 
        <p><input class="text" type="password" name="password" placeholder="password" /></p> 
 
        <p><input class="submit" type="submit" value="submit" /></p> 
 
       </form> 
 
     </li> 
 
    </ul> 
 
</nav>

Answer 1

Вы только орфографическими ошибками имя функции. Это должно быть slideToggle() вместо slideToogle().

Рабочая версия:http://jsfiddle.net/sajadtorkamani/2L37sn0t/