Css 有趣的子菜单重叠

我需要你的帮助

我似乎无法确定在CSS样式代码中，为什么框会出现重叠。如何解决此问题？把菜单放在前面

<!--            Start of top menu                   -->
<link rel="stylesheet" href="topmenu_files/mbcsmbtopmenu.css" type="text/css" />

<ul id="mbtopmenuebul_table" class="mbtopmenuebul_menulist css_menu">
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>File</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Save</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Print</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Close</a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Edit</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Add new</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Delete</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Clear all</a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>View</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Next ></a></li>
  <li class="gradient_menuitem gradient23"><a title="">< Prev</a></li>
  <li class="gradient_menuitem gradient23"><a title=""><< First</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Last >></a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Actions</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Export</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23"><a title="">Excel</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">HTML</a></li>
    </ul></li>
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Reports</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23"><a title="">Metrics</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">Item</a></li>
    </ul></li>
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">E-mail</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23 last_item"><a class="with_arrow" title="">Send</a>
      <ul class="gradient_menu gradient83">
      <li class="gradient_menuitem gradient23"><a title="">Notification</a></li>
      <li class="gradient_menuitem gradient23 last_item"><a title="">Reminder</a></li>
      </ul></li>
    </ul></li>
  <li class="gradient_menuitem gradient23 last_item"><a class="with_arrow" title="">Create</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23"><a title="">Coverpage</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">Approval sheet</a></li>
    </ul></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Help</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">About IMTS</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Contact support</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Quick Reference</a></li>
  </ul></li>
  <li class="topitem"><div class="buttonbg gradient_button gradient83" style="width: 39px;height: 19px;"><a class="button_6">Logoff</a></div></li>
</ul>
<!--            End  of top menu                    -->

---

将所有内容复制到JSFIDLE并截图：

您在哪个浏览器中看到这个，因为它似乎在那里工作得很好

---

我建议的另一件事是，在CSS中添加“边距：0 0 4px；”在UL？

上设置背景色至“#mbtopmenuebul#u表ul”

margin: 0 0 0 4px;

---

在这里摆弄：

事实上，这并没有给你想要的重叠——正如蒂希所说，你在哪个浏览器中看到这个问题？

margin: 0 0 0 4px;