jquery ui 的 menu 和 tabs 一起使用，menu的子菜单被挡住，有源码，官方的就这样，该如何修改呢 _JavaScript

jquery ui 的 menu 和 tabs 一起使用，menu的子菜单被挡住，有源码，官方的就这样，该怎么修改呢？
以下源码复制于官方例子中，除了我为演示被遮挡加了2句CSS外，其他代码都是从官方复制而来，一旦使用一个menu作为侧边栏的菜单，并且右边内容使用tabs的话，那么子菜单将被遮挡住，请问这个该怎么修改？

下面源码复制保存为一个html文档，打开即可看到效果。。。鼠标移动到有子菜单的菜单条上，就知道我说的是什么意思了。。。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

	$( "#menu" ).menu();

	$( "#tabs" ).tabs();

})

</script>



</head>



<body>

<ul id="menu" style=" width:120px; float:left;">

  <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>

  <li><a href="#">Ada</a></li>

  <li><a href="#">Adamsville</a></li>

  <li><a href="#">Addyston</a></li>

  <li>

    <a href="#">Delphi</a>

    <ul>

      <li class="ui-state-disabled"><a href="#">Ada</a></li>

      <li><a href="#">Saarland</a></li>

      <li><a href="#">Salzburg</a></li>

    </ul>

  </li>

  <li><a href="#">Saarland</a></li>

  <li>

    <a href="#">Salzburg</a>

    <ul>

      <li>

        <a href="#">Delphi</a>

        <ul>

          <li><a href="#">Ada</a></li>

          <li><a href="#">Saarland</a></li>

          <li><a href="#">Salzburg</a></li>