How do I make my login form appear on mouse over using jquery hover?

Question

I am making a web page with a drop-down loginbox.
The loginbox should slide down when the mouse hovers over a list item in the navigation menu using jquery hover.

The login form is hidden in css with display: none until the login link is moused over.
I have tried this using both slideToogle and css({"display":"block"})
I cannot get it to work thinking its a Any and all help would be gratly appriciated.

Here is a exercept from my page:

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

#login {
    list-style: none;
	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

You've just misspelt the function name. It should be slideToggle() instead of slideToogle().

Working version: http://jsfiddle.net/sajadtorkamani/2L37sn0t/