JQuery :: Change Sub Menu Position Dynamically ?

I have created horizontal menu like below...

<!--<ul id="topnav">
&nbsp;&nbsp;&nbsp; <li><a href="#">Link 1</a></li>
&nbsp;&nbsp;&nbsp; <li><a href="#">Link 2</a></li>
&nbsp;&nbsp;&nbsp; <li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">Link 4</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">Subnav Link</a> |
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">Subnav Link</a> |
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">Subnav Link</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
&nbsp;&nbsp;&nbsp; </li>
&nbsp;&nbsp;&nbsp; <li><a href="#">Link 3</a></li>
</ul>-->

problem is in my css i assigned margin-left:0px for span.so all my sub navs align to left.but i want to align sub nav under the mail nav.means i need to change align-left property of css dynamically using jquery.

means first sub nav link should be below 'link4' not under 'link1'

so i added following code but i dnt knw how to grab current li position and assign it to span margin.

$("#topnav li").hover(function () {
($(thіѕ).children()) {
$(thіѕ).has('span').css({ 'left': '200px' });
}, function () { //οn hover out...
});