css - jQuery UI メニューの配置の問題

Question

jQuery UI を使用して、作業中のサイトにドロップダウン メニューを作成しようとしています。一見問題ないように見えますが、ネストされたul要素の開始位置がメニューの次のリンクをブロックしているように見えます。青いボックスは、ネストさulれた Firebug にカーソルを合わせると表示されるもので、「リンク 2」にカーソルを合わせるのを防ぎます。これを実際のメニューに合わせて移動するにはどうすればよいですか? ありがとうございました！

灰色のサブリンクは正常に機能します。

<div id="nav">
<ul>
<li>Link 1
<ul>
...
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>

#nav ul {
    list-style-type: none;
    float:right;
}

#nav ul li ul {
    position:absolute;
    width: 200px;
}

#nav ul li ul li {
    display: block;
    position:relative;
    top:40px;
    left:-165px;
}