CSS dropdown menu jumping - html

Question

I'm stuck with a drop down menu. The problem is that the "parent" link is jumping.
HTML:
<ul id="nav">
<li><span>Page 1</span>
<ul>
<li><a>Extralong Page 1.1</a></li>
<li><a>Page 1.2</a></li>
<li><a>Page 1.3</a></li>
</ul>
</li>
<li>Page 2</li>
<li><span>Page 3</span>
<ul>
<li><a>Page 3.1</a></li>
<li><a>Long description for page 3.2</a></li>
<li><a>Page 3.3</a></li>
<li><a>Page 3.4</a></li>
</ul>
</li>
</ul>
CSS:
* {
margin: 0;
padding: 0;
}
#nav {
float: right;
}
#nav ul {
float: left;
}
#nav li {
float: left;
padding-top: 2px;
list-style: none;
background: #3451ff;
}
#nav li a,
#nav li span {
display: block;
text-decoration: none;
font-size: 12pt;
font-weight: bold;
padding: 13px 10px 9px 10px;
}
#nav li a:link, #nav li a:active, #nav li a:visited,
#nav li span {
color: #FFF;
}
#nav li a:hover, #nav li a.active,
#nav li span:hover {
color: #000;
}
#nav li li {
display: none;
}
#nav li:hover li {
display: block;
float: none;
background: #555;
}
#nav li li a {
font-size: 10pt;
margin: 1px;
width: 100%;
background: #3c6f3a;
padding: 5px 0;
}
Demo
How can I make this parent static such that it's width isn't changed on hover? I don't want to use js.

Answer 1

Set a width for the parent:
#nav li {
float: left;
padding-top: 2px;
list-style: none;
width: 100px; /* Add this bad boy */
background: #3451ff;
}
DEMO HERE

Answer 2

You can use position:absolute and make its parent li position:relative Demo
#nav ul {
position:absolute;
right:0;
}

Answer 3

Use position:relative for ul parent and give position:absolute for parent child..it will be working fine.
Here is the updated fiddle :http://jsfiddle.net/nikhilvkd/gmU55/5/
#nav li li {
display: none;
position:relative;
}
#nav li:hover li {
display: block;
float: none;
position:absolute;
background: #555;
}