Hi,

I've been working on a site with a right-aligned dropline css nav, and am having trouble positioning the second level the way I want it. Currently the first level is right-aligned, but when you hover over a link with second level items, the second level is showing up all the way to the left. Because the second level has to be positioned absolutely in order for it to stay hidden, I'm stuck! I need enough width so that any amount of second level items will show up on one line.

Here's the link to my test page: http://wovenwirestudio.com/testNav.html (edit)

Here's my HTML:
[code]
<div id="primaryNav">
<ul id="nav">
<li class="current"><a href="index.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Home</a></li>
<li><a href="about.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">About</a>
<ul>
<li><a href="abouttheartist.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">about the artist</a></li>
<li><a class="final" href="aboutthework.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">about the work</a></li>
</ul>
</li>
<li><a href="jewelry.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Jewelry</a>
<ul>
<li><a href="cuffs.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">cuffs</a></li>
<li><a href="pins.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">pins</a></li>
<li><a href="neckpieces.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">neck pieces</a></li>
<li><a href="coloredwire.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">colored wire</a></li>
<li><a href="wallsculpture.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">wall sculpture</a></li>
<li><a class="final" href="misc.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">miscellaneous</a></li>
</ul>
</li>
<li><a href="sculpture.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Sculpture</a></li>
<li><a href="contact.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Contact</a></li>
<li><a href="signup.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Sign Up</a></li>
</ul>
</div>
[/code]

Here's my CSS
[code]
#primaryNav {
margin:0 auto;
text-align:center;
width:490px;
float:right;
}

/* Begin Navigation */
ul#nav {
padding:78px 15px 0 0;
list-style:none;
text-align:right;
margin:0 auto;
width:490px;
float:right;
}

ul#nav li {
margin:0;
padding:0 0 0 18px;
text-align:right;
display:inline;
}

ul#nav li a {
text-decoration:none;
font-size:1.3em;
color:#fff;
}

ul#nav li a:hover {text-decoration:underline;}

ul#nav li.current {color:#fff;}

ul#nav li.current a {
color:#fff;
text-decoration:underline;
}

ul#nav li.current ul {
left:0;
z-index:1;
top:auto;
}/* display the submenu for the current page in case js is disabled*/

/* drop down styling */

ul#nav div {
display:inline;
}

ul#nav ul {
position:absolute;
left:-999em;
top:auto;
margin:0 auto;
text-align:center;
overflow:visible;
padding:0;
z-index:2;
}

ul#nav ul li {
float:left;
text-align:right;
padding:0;
margin:0 auto;
}

#primaryNav ul#nav ul li a {
font-size:1.1em;
font-weight:bold;
color:#333;
display:block;
float:left;
padding:12px 3px;
text-decoration:none;
}

/* mac hide \*/
* html ul#nav ul li,
#primaryNav ul#nav ul li a {height:1%}/* for ie5*/
/* end hide*/

#primaryNav ul#nav ul li a:hover {
font-style:italic;
text-decoration:underline;
}/*subnav list text change on hover*/

ul#nav li:hover ul, ul#nav li.over ul {left:0;} /* The magic */
#nav li:hover ul, #nav li.sfhover ul {left: auto;}
[/code]