Sliding Navigation Bar Css - css

Question

I'm trying to build a navigation bar where the sub menus slide in from the side of the page using css. I'm having the problem that when the sub menus slide in the position of the parent menu items changes. I have made a fiddle here http://jsfiddle.net/CL7d7/ can someone suggest where I have gone wrong.
html
<ul>
<li>Home</li>
<li>
<a class="box" href="#">Weddings</a>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
<li>Biography</li>
<li>Services</li>
<li>Photobooth</li>
</ul>
</div><!-- end #nav -->
css
#wrap{
width:500px;
overflow: hidden;
}
#nav {
height: 35px;
width: 500px;
font-size: 13px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 1px #EEE;
background-color: transparent;
z-index: 1;
}
#nav ul {
height: auto;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#nav li {
float: left;
margin-right: 5px;
margin-left: 5px;
display: inline;
}
#nav ul a{
text-decoration: none;
display: block;
padding-top: 10px;
width: 80px;
text-align: center;
height: 20px;
color: #666;
margin: 0px;
}
#nav a:hover {
color: #999999;
}
#nav a:active {
background-color: transparent;
}
#nav ul ul {
text-shadow: 1px 1px 1px #EEE;
z-index: 2;
/*display:none;*/
padding-left: 0px;
top: 35px;
transition: right 1s;
-moz-transition: right 1s; /* Firefox 4 */
-webkit-transition: right 1s; /* Safari and Chrome */
-o-transition: right 1s; /* Opera */
-ms-transition: right 1s;
right: -500px;
position: absolute;
float: left;
}
#nav ul ul li {
display: inline;
}
#nav ul ul a {
color: #F9C;
font-size: 12px;
width: 80px;
height: 35px;
}
#nav ul ul a:hover {
display: block;
color: #99999;
font-size: 12px;
position: absolute;
}
#nav ul li:hover > ul {
overflow: hidden;
right: 0px;
display: block;
top: 0px;
position: relative;
}
#nav ul ul li {
display: inline;
}
#nav ul ul a {
color: #F9C;
font-size: 12px;
width: 80px;
height: 35px;
}
#nav ul ul a:hover {
display: block;
color: #99999;
font-size: 12px;
position: absolute;
}
#nav ul li:hover > ul {
overflow: hidden;
right: 0px;
display: block;
top: 0px;
position: relative;
}
#nav li:hover > a {
color: #99999;
display: block;
}
#nav li:hover > a {
color: #99999;
display: block;
}

Answer 1

Change your positioning to absolute in #nav ul li:hover > ul. Also set top property for alignment.
It should be like this:
#nav ul li:hover > ul {
overflow: hidden;
right: 0px;
display: block;
top: 40px;
position: absolute;
}
And here is the fiddle