create one submenu larger than the others to include form

Question 1

I have added some css style to resolve your bug:

body {
	background-color: #A3A3A3;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
nav {
	background: #666;
	padding-top: 10em;
	width: 10em;
	position: absolute;
	top: 0;
	bottom: 0;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav ul a:hover, ul a:focus {
	background-color: #333;
}
nav ul li {
	position: relative;
}
nav ul li a {
	text-align: center;
	display: block;
	padding: 1em;
	color: #A3A3A3;
	text-decoration: none;
}
nav ul li ul {
	width: 10em;
	background: #666;
	position: absolute;
	right: -10em;
	top: 0px;
	display: none;
}
nav ul li ul:last-child {
	border-radius: 0 15px 15px 0;
}
nav ul li ul li:first-child a:hover {
	border-radius: 0 15px 0 0;
}
nav ul li ul li:last-child a:hover {
	border-radius: 0 0 15px 0;
}
nav ul li:hover > ul {
	display: block;
}
body h1 {
	vertical-align: central;
}
.pure-form {width: 15em;
	background: #666;
	position: absolute;
	right: -15em;
	top: 0px;
	display: none;}
.login:hover .pure-form {display:block;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="sideMenu.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
</head>

<body>
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Post Jobs</a>
      <ul>
        <li><a href="#">Type 1</a></li>
        <li><a href="#">Type 2</a></li>
        <li><a href="#">Type 3</a></li>
      </ul>
    </li>
    <li><a href="#">Browse Jobs</a>
      <ul>
        <li><a href="#">Type 1</a></li>
        <li><a href="#">Type 2</a></li>
        <li><a href="#">Type 3</a></li>
        <li><a href="#">Type 4</a></li>
        <li><a href="#">Type 5</a></li>
        <li><a href="#">Type 6</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li class="login"><a href="#">Login</a>
      <form class="pure-form pure-form-stacked">
        <fieldset>
          <label for="email">Email</label>
          <input id="email" type="email" placeholder="Email">
          <label for="password">Password</label>
          <input id="password" type="password" placeholder="Password">
          <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox">
            Remember me </label>
          <button type="submit" class="pure-button pure-button-primary">Sign in</button>
        </fieldset>
      </form>
    </li>
  </ul>
</nav>
</body>
</html>

Question 2

use this

<li><a class="login" href="#">Login</a>
<div class="form" style="display:none">
  <form class="pure-form pure-form-stacked">
    <fieldset>
      <label for="email">Email</label>
      <input id="email" type="email" placeholder="Email">
      <label for="password">Password</label>
      <input id="password" type="password" placeholder="Password">
      <label for="remember" class="pure-checkbox">
        <input id="remember" type="checkbox">
        Remember me </label>
      <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
  </form>
  </div>
</li>

js

$(document).ready(function() {

$(".login").hover(function() {

    $(".form").css("display", "block")
},

    function(){

    $(".form").css("display", "none");


    }



    );

});

this will trigger the element on mouseover but it will again disappear on mouseout. If you want you can use mouseover so it will display when user mouseover it. or you can use click function.

Question 3

I see that you use <a class="login" href="#">Login</a> which you used class.

In CSS when using class you must use '.' to use that class

ex. html: <a class="login" href="#">Login</a>

css: .login{ some css style here }

you will only use # when you use the id

ex. html: <a id="login" href="#">Login</a>

css: #login{ some css style here }

about your question, here is a fiddle of my answer: http://jsfiddle.net/5TfpH/6/